<!DOCTYPE html>
<!-- saved from url=(0142)#h.ribp47msejya -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>WebPerf WG @ TPAC 2021</title><link rel="shortcut icon" href="https://ssl.gstatic.com/docs/documents/images/kix-favicon7.ico"><meta name="referrer" content="strict-origin-when-cross-origin"><style type="text/css" nonce="">
      @import url("https://fonts.googleapis.com/css?family=Google+Sans_old");
      @import url("https://fonts.googleapis.com/css?family=Roboto");

      body {
        font-family: Roboto, arial, sans, sans-serif;
        margin: 0;
      }

      iframe {
        border: 0;
        frameborder: 0;
        height: 100%;
        width: 100%;
      }

      #banners {
        align-items: center;
        background: white;
        display: block;
        justify-content: space-between;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
      }

      #banners #publish-banner {
        background-color: #e8f0fe;
        border-bottom: 1px #ccc solid;
        color: #202124;
        display: flex;
        flex: 1 1 0%;
        height: 60px;
        width: 100%;
      }

      #publish-banner-icon {
        display: flex;
        fill: #1967d2;
        margin: auto 20px;
      }

      #publish-banner-text {
        flex-grow: 1;
        margin: auto 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #publish-banner-buttons {
        margin: auto 25px auto 0;
      }

      #publish-banner-buttons span {
        align-self: center;
        background-color: inherit;
        border: none;
        font-family: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        margin: 0 16px 0 32px;
      }

      #publish-banner-buttons a {
        color: #1967d2;
        cursor: pointer;
        font-family: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        text-decoration: none;
      }

      #banners #title-banner {
        background: white;
        border-bottom: 1px #ccc solid;
        display: flex;
        flex: 1 1 0%;
        height: 60px;
        width: 100%;
      }

      #banners #title-banner #title {
        flex-grow: 1;
        font-family: 'Google Sans';
        font-size: large;
        margin: auto 0 auto 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 70%;
      }

      #banners #title-banner #interval {
        margin: auto 25px auto 0;
        font-family: Roboto;
        font-size: small;;
      }

      #footer {
        background: #f0f0f0;
        border-bottom: 1px #ccc solid;
        bottom: 0;
        font-family: Roboto;
        font-size: small;
        padding: 10px 10px;
        position: fixed;
        text-align: center;
        width: 100%;
      }

      #contents {
        padding: 100px 20% 50px 20%;
      }

      @media only screen and (max-device-width: 800px) {
        #banners #title-banner {
          border-bottom-width: 5px;
          height: auto;
          display: block;
        }

        #banners #title-banner #title {
          font-size: 3em;
          margin: auto 0 auto 20px;
          width: 90%;
        }

        #banners #title-banner #interval {
          font-size: 1.5em;
          margin: 10px 0 auto 25px;
        }

        #contents {
          padding: 150px 5% 80px;
        }

        #footer {
          font-size: 2em;
        }
      }

      .dash {
        padding: 0 6px;
      }
    </style></head><body><div id="banners"><div style="display:none" id="publish-banner"><span id="publish-banner-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></span><div id="publish-banner-text">Published using Google Docs</div><div id="publish-banner-buttons"><span><a target="_blank" title="Learn more" href="https://support.google.com/docs/answer/183965">Learn More</a></span><span><a href="https://docs.google.com/u/0/abuse?id=AKkXjowWMzsLGzerlsNcHz7nr5u2yc8ar72eiGFfXlZAuiPEKZRDpL5hPookryCKbjJf_A9y_jeVLDRpW2r9w1c:0"></a></span></div></div><div id="title-banner"><div id="title">WebPerf WG @ TPAC 2021</div><div id="interval"><span></span></div></div></div><div id="contents"><style type="text/css">ul.lst-kix_8deurvnuojkb-2{list-style-type:none}ul.lst-kix_8deurvnuojkb-3{list-style-type:none}ul.lst-kix_8deurvnuojkb-0{list-style-type:none}.lst-kix_lg6blqs8wii2-0>li:before{content:"\0025cf  "}ul.lst-kix_8deurvnuojkb-1{list-style-type:none}.lst-kix_rwpeiwyra0dr-8>li:before{content:"\0025a0  "}ul.lst-kix_8deurvnuojkb-6{list-style-type:none}ul.lst-kix_8deurvnuojkb-7{list-style-type:none}ul.lst-kix_8deurvnuojkb-4{list-style-type:none}ul.lst-kix_8deurvnuojkb-5{list-style-type:none}.lst-kix_ncrutvqrvzzc-7>li:before{content:"\0025cb  "}.lst-kix_ncrutvqrvzzc-6>li:before{content:"\0025cf  "}.lst-kix_lg6blqs8wii2-4>li:before{content:"\0025cb  "}ul.lst-kix_835rqaclo36m-7{list-style-type:none}.lst-kix_ncrutvqrvzzc-5>li:before{content:"\0025a0  "}ul.lst-kix_835rqaclo36m-8{list-style-type:none}ul.lst-kix_835rqaclo36m-5{list-style-type:none}ul.lst-kix_835rqaclo36m-6{list-style-type:none}.lst-kix_lg6blqs8wii2-5>li:before{content:"\0025a0  "}ul.lst-kix_835rqaclo36m-3{list-style-type:none}.lst-kix_ncrutvqrvzzc-3>li:before{content:"\0025cf  "}ul.lst-kix_1dcmsdrcn8h-5{list-style-type:none}.lst-kix_rwpeiwyra0dr-2>li:before{content:"\0025a0  "}ul.lst-kix_835rqaclo36m-4{list-style-type:none}ul.lst-kix_1dcmsdrcn8h-4{list-style-type:none}ul.lst-kix_835rqaclo36m-1{list-style-type:none}.lst-kix_ncrutvqrvzzc-2>li:before{content:"\0025a0  "}.lst-kix_ncrutvqrvzzc-4>li:before{content:"\0025cb  "}ul.lst-kix_1dcmsdrcn8h-3{list-style-type:none}.lst-kix_rwpeiwyra0dr-3>li:before{content:"\0025cf  "}ul.lst-kix_835rqaclo36m-2{list-style-type:none}.lst-kix_lg6blqs8wii2-6>li:before{content:"\0025cf  "}.lst-kix_lg6blqs8wii2-8>li:before{content:"\0025a0  "}ul.lst-kix_1dcmsdrcn8h-2{list-style-type:none}.lst-kix_rwpeiwyra0dr-4>li:before{content:"\0025cb  "}ul.lst-kix_835rqaclo36m-0{list-style-type:none}ul.lst-kix_1dcmsdrcn8h-8{list-style-type:none}ul.lst-kix_1dcmsdrcn8h-7{list-style-type:none}.lst-kix_lg6blqs8wii2-7>li:before{content:"\0025cb  "}ul.lst-kix_1dcmsdrcn8h-6{list-style-type:none}.lst-kix_rwpeiwyra0dr-6>li:before{content:"\0025cf  "}.lst-kix_ncrutvqrvzzc-0>li:before{content:"\0025cf  "}.lst-kix_rwpeiwyra0dr-5>li:before{content:"\0025a0  "}.lst-kix_rwpeiwyra0dr-7>li:before{content:"\0025cb  "}.lst-kix_ncrutvqrvzzc-1>li:before{content:"\0025cb  "}ul.lst-kix_1dcmsdrcn8h-1{list-style-type:none}ul.lst-kix_1dcmsdrcn8h-0{list-style-type:none}ul.lst-kix_z8fnyoihpe2u-3{list-style-type:none}.lst-kix_7kgbo4t4lkey-8>li:before{content:"\0025a0  "}ul.lst-kix_z8fnyoihpe2u-2{list-style-type:none}ul.lst-kix_z8fnyoihpe2u-5{list-style-type:none}.lst-kix_7kgbo4t4lkey-7>li:before{content:"\0025cb  "}ul.lst-kix_z8fnyoihpe2u-4{list-style-type:none}.lst-kix_7kgbo4t4lkey-6>li:before{content:"\0025cf  "}ul.lst-kix_z8fnyoihpe2u-1{list-style-type:none}ul.lst-kix_z8fnyoihpe2u-0{list-style-type:none}.lst-kix_7kgbo4t4lkey-4>li:before{content:"\0025cb  "}.lst-kix_7kgbo4t4lkey-3>li:before{content:"\0025cf  "}.lst-kix_7kgbo4t4lkey-5>li:before{content:"\0025a0  "}ul.lst-kix_z8fnyoihpe2u-7{list-style-type:none}ul.lst-kix_z8fnyoihpe2u-6{list-style-type:none}ul.lst-kix_z8fnyoihpe2u-8{list-style-type:none}.lst-kix_7kgbo4t4lkey-0>li:before{content:"\0025cf  "}.lst-kix_7kgbo4t4lkey-1>li:before{content:"\0025cb  "}.lst-kix_rwpeiwyra0dr-1>li:before{content:"\0025cb  "}.lst-kix_4r25nsaz8j92-5>li:before{content:"\0025a0  "}.lst-kix_7kgbo4t4lkey-2>li:before{content:"\0025a0  "}.lst-kix_rwpeiwyra0dr-0>li:before{content:"\0025cf  "}.lst-kix_4r25nsaz8j92-4>li:before{content:"\0025cb  "}.lst-kix_4r25nsaz8j92-1>li:before{content:"\0025cb  "}.lst-kix_4r25nsaz8j92-3>li:before{content:"\0025cf  "}.lst-kix_4r25nsaz8j92-2>li:before{content:"\0025a0  "}ul.lst-kix_vy14fvvk8xlp-1{list-style-type:none}ul.lst-kix_vy14fvvk8xlp-0{list-style-type:none}.lst-kix_kkr7qu8s4lt8-8>li:before{content:"\0025a0  "}.lst-kix_kkr7qu8s4lt8-7>li:before{content:"\0025cb  "}.lst-kix_kkr7qu8s4lt8-6>li:before{content:"\0025cf  "}ul.lst-kix_376ipe9z4ys9-0{list-style-type:none}.lst-kix_4r25nsaz8j92-0>li:before{content:"\0025cf  "}ul.lst-kix_376ipe9z4ys9-3{list-style-type:none}ul.lst-kix_376ipe9z4ys9-4{list-style-type:none}ul.lst-kix_376ipe9z4ys9-1{list-style-type:none}ul.lst-kix_376ipe9z4ys9-2{list-style-type:none}ul.lst-kix_376ipe9z4ys9-7{list-style-type:none}ul.lst-kix_376ipe9z4ys9-8{list-style-type:none}ul.lst-kix_376ipe9z4ys9-5{list-style-type:none}.lst-kix_phulklnep3we-7>li:before{content:"\0025cb  "}ul.lst-kix_376ipe9z4ys9-6{list-style-type:none}ul.lst-kix_44zor6ujv0yu-4{list-style-type:none}.lst-kix_kkr7qu8s4lt8-0>li:before{content:"\0025cf  "}ul.lst-kix_44zor6ujv0yu-3{list-style-type:none}ul.lst-kix_44zor6ujv0yu-2{list-style-type:none}.lst-kix_kkr7qu8s4lt8-1>li:before{content:"\0025cb  "}ul.lst-kix_44zor6ujv0yu-1{list-style-type:none}ul.lst-kix_44zor6ujv0yu-0{list-style-type:none}.lst-kix_kkr7qu8s4lt8-2>li:before{content:"\0025a0  "}.lst-kix_phulklnep3we-8>li:before{content:"\0025a0  "}.lst-kix_kkr7qu8s4lt8-4>li:before{content:"\0025cb  "}ul.lst-kix_vy14fvvk8xlp-8{list-style-type:none}ul.lst-kix_vy14fvvk8xlp-7{list-style-type:none}.lst-kix_kkr7qu8s4lt8-3>li:before{content:"\0025cf  "}.lst-kix_kkr7qu8s4lt8-5>li:before{content:"\0025a0  "}ul.lst-kix_p2igigmh7ri-8{list-style-type:none}ul.lst-kix_vy14fvvk8xlp-6{list-style-type:none}ul.lst-kix_p2igigmh7ri-7{list-style-type:none}ul.lst-kix_vy14fvvk8xlp-5{list-style-type:none}ul.lst-kix_44zor6ujv0yu-8{list-style-type:none}ul.lst-kix_p2igigmh7ri-6{list-style-type:none}ul.lst-kix_vy14fvvk8xlp-4{list-style-type:none}ul.lst-kix_44zor6ujv0yu-7{list-style-type:none}ul.lst-kix_p2igigmh7ri-5{list-style-type:none}ul.lst-kix_vy14fvvk8xlp-3{list-style-type:none}ul.lst-kix_44zor6ujv0yu-6{list-style-type:none}ul.lst-kix_p2igigmh7ri-4{list-style-type:none}ul.lst-kix_vy14fvvk8xlp-2{list-style-type:none}ul.lst-kix_44zor6ujv0yu-5{list-style-type:none}ul.lst-kix_p2igigmh7ri-3{list-style-type:none}ul.lst-kix_p2igigmh7ri-2{list-style-type:none}ul.lst-kix_p2igigmh7ri-1{list-style-type:none}ul.lst-kix_p2igigmh7ri-0{list-style-type:none}.lst-kix_phulklnep3we-0>li:before{content:"\0025cf  "}.lst-kix_n86quw5wooza-0>li:before{content:"\0025cf  "}.lst-kix_phulklnep3we-1>li:before{content:"\0025cb  "}.lst-kix_n86quw5wooza-1>li:before{content:"\0025cb  "}.lst-kix_n86quw5wooza-2>li:before{content:"\0025a0  "}.lst-kix_n86quw5wooza-3>li:before{content:"\0025cf  "}.lst-kix_phulklnep3we-6>li:before{content:"\0025cf  "}.lst-kix_n86quw5wooza-5>li:before{content:"\0025a0  "}.lst-kix_n86quw5wooza-6>li:before{content:"\0025cf  "}.lst-kix_phulklnep3we-4>li:before{content:"\0025cb  "}.lst-kix_n86quw5wooza-4>li:before{content:"\0025cb  "}.lst-kix_n86quw5wooza-8>li:before{content:"\0025a0  "}.lst-kix_phulklnep3we-5>li:before{content:"\0025a0  "}.lst-kix_lg6blqs8wii2-3>li:before{content:"\0025cf  "}.lst-kix_phulklnep3we-2>li:before{content:"\0025a0  "}.lst-kix_ncrutvqrvzzc-8>li:before{content:"\0025a0  "}.lst-kix_lg6blqs8wii2-2>li:before{content:"\0025a0  "}.lst-kix_n86quw5wooza-7>li:before{content:"\0025cb  "}.lst-kix_phulklnep3we-3>li:before{content:"\0025cf  "}.lst-kix_lg6blqs8wii2-1>li:before{content:"\0025cb  "}.lst-kix_835rqaclo36m-7>li:before{content:"\0025cb  "}.lst-kix_835rqaclo36m-3>li:before{content:"\0025cf  "}.lst-kix_x87irn1u7y09-4>li:before{content:"\0025cb  "}ul.lst-kix_9lv5ekihldmd-6{list-style-type:none}ul.lst-kix_9lv5ekihldmd-5{list-style-type:none}.lst-kix_835rqaclo36m-1>li:before{content:"\0025cb  "}ul.lst-kix_9lv5ekihldmd-4{list-style-type:none}ul.lst-kix_9lv5ekihldmd-3{list-style-type:none}ul.lst-kix_9lv5ekihldmd-8{list-style-type:none}ul.lst-kix_9lv5ekihldmd-7{list-style-type:none}.lst-kix_x87irn1u7y09-2>li:before{content:"\0025a0  "}ul.lst-kix_9lv5ekihldmd-2{list-style-type:none}ul.lst-kix_2kif4r65nu02-5{list-style-type:none}.lst-kix_x87irn1u7y09-0>li:before{content:"\0025cf  "}ul.lst-kix_9lv5ekihldmd-1{list-style-type:none}ul.lst-kix_2kif4r65nu02-6{list-style-type:none}ul.lst-kix_9lv5ekihldmd-0{list-style-type:none}ul.lst-kix_2kif4r65nu02-7{list-style-type:none}ul.lst-kix_2kif4r65nu02-8{list-style-type:none}.lst-kix_djvau7gj2w8b-8>li:before{content:"\0025a0  "}.lst-kix_djvau7gj2w8b-4>li:before{content:"\0025cb  "}.lst-kix_7dvop4c8s0d-7>li:before{content:"\0025cb  "}.lst-kix_djvau7gj2w8b-6>li:before{content:"\0025cf  "}.lst-kix_djvau7gj2w8b-0>li:before{content:"\0025cf  "}.lst-kix_x87irn1u7y09-6>li:before{content:"\0025cf  "}.lst-kix_7dvop4c8s0d-1>li:before{content:"\0025cb  "}.lst-kix_7dvop4c8s0d-3>li:before{content:"\0025cf  "}.lst-kix_835rqaclo36m-5>li:before{content:"\0025a0  "}.lst-kix_7dvop4c8s0d-5>li:before{content:"\0025a0  "}.lst-kix_djvau7gj2w8b-2>li:before{content:"\0025a0  "}.lst-kix_x87irn1u7y09-8>li:before{content:"\0025a0  "}.lst-kix_c2ezjrtxwn6r-1>li:before{content:"\0025cb  "}.lst-kix_c2ezjrtxwn6r-5>li:before{content:"\0025a0  "}.lst-kix_z8fnyoihpe2u-8>li:before{content:"\0025a0  "}.lst-kix_9lv5ekihldmd-7>li:before{content:"\0025cb  "}.lst-kix_c2ezjrtxwn6r-3>li:before{content:"\0025cf  "}.lst-kix_4r25nsaz8j92-6>li:before{content:"\0025cf  "}.lst-kix_9lv5ekihldmd-3>li:before{content:"\0025cf  "}.lst-kix_s97cqb78zmi7-7>li:before{content:"\0025cb  "}.lst-kix_9lv5ekihldmd-1>li:before{content:"\0025cb  "}.lst-kix_9lv5ekihldmd-5>li:before{content:"\0025a0  "}.lst-kix_4r25nsaz8j92-8>li:before{content:"\0025a0  "}.lst-kix_s97cqb78zmi7-5>li:before{content:"\0025a0  "}.lst-kix_s97cqb78zmi7-1>li:before{content:"\0025cb  "}ul.lst-kix_2kif4r65nu02-1{list-style-type:none}ul.lst-kix_2kif4r65nu02-2{list-style-type:none}ul.lst-kix_2kif4r65nu02-3{list-style-type:none}ul.lst-kix_2kif4r65nu02-4{list-style-type:none}.lst-kix_s97cqb78zmi7-3>li:before{content:"\0025cf  "}.lst-kix_y8664apqgwm5-8>li:before{content:"\0025a0  "}ul.lst-kix_2kif4r65nu02-0{list-style-type:none}.lst-kix_z8fnyoihpe2u-0>li:before{content:"\0025cf  "}.lst-kix_o5qywvp9xm4o-0>li:before{content:"\0025cf  "}.lst-kix_y8664apqgwm5-6>li:before{content:"\0025cf  "}.lst-kix_z8fnyoihpe2u-4>li:before{content:"\0025cb  "}.lst-kix_z8fnyoihpe2u-2>li:before{content:"\0025a0  "}.lst-kix_z8fnyoihpe2u-6>li:before{content:"\0025cf  "}.lst-kix_1dcmsdrcn8h-8>li:before{content:"\0025a0  "}.lst-kix_y8664apqgwm5-0>li:before{content:"\0025cf  "}.lst-kix_y8664apqgwm5-4>li:before{content:"\0025cb  "}ul.lst-kix_8deurvnuojkb-8{list-style-type:none}.lst-kix_y8664apqgwm5-2>li:before{content:"\0025a0  "}.lst-kix_c8i4jrv36f65-1>li:before{content:"\0025cb  "}.lst-kix_c8i4jrv36f65-2>li:before{content:"\0025a0  "}.lst-kix_c8i4jrv36f65-5>li:before{content:"\0025a0  "}.lst-kix_c8i4jrv36f65-6>li:before{content:"\0025cf  "}.lst-kix_1dcmsdrcn8h-0>li:before{content:"\0025cf  "}.lst-kix_o5qywvp9xm4o-8>li:before{content:"\0025a0  "}.lst-kix_7ud9h2t659dd-2>li:before{content:"-  "}.lst-kix_75yzxb4d5d2u-2>li:before{content:"\0025a0  "}.lst-kix_o5qywvp9xm4o-5>li:before{content:"\0025a0  "}.lst-kix_o5qywvp9xm4o-4>li:before{content:"\0025cb  "}.lst-kix_lj1zkd3bpkgx-5>li:before{content:"\0025a0  "}.lst-kix_75yzxb4d5d2u-1>li:before{content:"\0025cb  "}.lst-kix_1dcmsdrcn8h-4>li:before{content:"\0025cb  "}.lst-kix_lj1zkd3bpkgx-6>li:before{content:"\0025cf  "}.lst-kix_1dcmsdrcn8h-3>li:before{content:"\0025cf  "}ul.lst-kix_7ud9h2t659dd-6{list-style-type:none}ul.lst-kix_7ud9h2t659dd-7{list-style-type:none}ul.lst-kix_7ud9h2t659dd-8{list-style-type:none}.lst-kix_spr6x5pb1u0q-1>li:before{content:"\0025cb  "}ul.lst-kix_7ud9h2t659dd-0{list-style-type:none}ul.lst-kix_7ud9h2t659dd-1{list-style-type:none}ul.lst-kix_7ud9h2t659dd-2{list-style-type:none}ul.lst-kix_7ud9h2t659dd-3{list-style-type:none}ul.lst-kix_7ud9h2t659dd-4{list-style-type:none}ul.lst-kix_7ud9h2t659dd-5{list-style-type:none}.lst-kix_spr6x5pb1u0q-5>li:before{content:"\0025a0  "}.lst-kix_7ud9h2t659dd-6>li:before{content:"-  "}.lst-kix_spr6x5pb1u0q-2>li:before{content:"\0025a0  "}.lst-kix_spr6x5pb1u0q-6>li:before{content:"\0025cf  "}.lst-kix_lj1zkd3bpkgx-2>li:before{content:"\0025a0  "}.lst-kix_7ud9h2t659dd-3>li:before{content:"-  "}.lst-kix_7ud9h2t659dd-7>li:before{content:"-  "}.lst-kix_lj1zkd3bpkgx-1>li:before{content:"\0025cb  "}.lst-kix_75yzxb4d5d2u-5>li:before{content:"\0025a0  "}.lst-kix_c2ezjrtxwn6r-8>li:before{content:"\0025a0  "}.lst-kix_c2ezjrtxwn6r-7>li:before{content:"\0025cb  "}.lst-kix_75yzxb4d5d2u-6>li:before{content:"\0025cf  "}.lst-kix_5fhkllpes9k2-6>li:before{content:"\0025cf  "}.lst-kix_fl0ihf9kdb4o-7>li:before{content:"\0025cb  "}.lst-kix_5fhkllpes9k2-1>li:before{content:"\0025cb  "}.lst-kix_5fhkllpes9k2-5>li:before{content:"\0025a0  "}.lst-kix_5fhkllpes9k2-2>li:before{content:"\0025a0  "}.lst-kix_fl0ihf9kdb4o-4>li:before{content:"\0025cb  "}.lst-kix_7dvop4c8s0d-0>li:before{content:"\0025cf  "}ul.lst-kix_irvgnf3nji8s-1{list-style-type:none}ul.lst-kix_irvgnf3nji8s-0{list-style-type:none}.lst-kix_fl0ihf9kdb4o-3>li:before{content:"\0025cf  "}ul.lst-kix_kkr7qu8s4lt8-1{list-style-type:none}ul.lst-kix_kkr7qu8s4lt8-2{list-style-type:none}ul.lst-kix_irvgnf3nji8s-8{list-style-type:none}ul.lst-kix_kkr7qu8s4lt8-3{list-style-type:none}ul.lst-kix_irvgnf3nji8s-7{list-style-type:none}ul.lst-kix_kkr7qu8s4lt8-4{list-style-type:none}ul.lst-kix_irvgnf3nji8s-6{list-style-type:none}.lst-kix_fl0ihf9kdb4o-0>li:before{content:"\0025cf  "}ul.lst-kix_kkr7qu8s4lt8-5{list-style-type:none}ul.lst-kix_irvgnf3nji8s-5{list-style-type:none}ul.lst-kix_kkr7qu8s4lt8-6{list-style-type:none}ul.lst-kix_irvgnf3nji8s-4{list-style-type:none}ul.lst-kix_kkr7qu8s4lt8-7{list-style-type:none}ul.lst-kix_irvgnf3nji8s-3{list-style-type:none}ul.lst-kix_kkr7qu8s4lt8-8{list-style-type:none}ul.lst-kix_irvgnf3nji8s-2{list-style-type:none}ul.lst-kix_kkr7qu8s4lt8-0{list-style-type:none}.lst-kix_vy14fvvk8xlp-1>li:before{content:"\0025cb  "}.lst-kix_vy14fvvk8xlp-2>li:before{content:"\0025a0  "}ul.lst-kix_7kgbo4t4lkey-4{list-style-type:none}ul.lst-kix_7kgbo4t4lkey-5{list-style-type:none}ul.lst-kix_7kgbo4t4lkey-2{list-style-type:none}.lst-kix_vy14fvvk8xlp-5>li:before{content:"\0025a0  "}ul.lst-kix_7kgbo4t4lkey-3{list-style-type:none}ul.lst-kix_7kgbo4t4lkey-8{list-style-type:none}ul.lst-kix_y8664apqgwm5-3{list-style-type:none}ul.lst-kix_y8664apqgwm5-2{list-style-type:none}ul.lst-kix_7kgbo4t4lkey-6{list-style-type:none}ul.lst-kix_y8664apqgwm5-1{list-style-type:none}ul.lst-kix_7kgbo4t4lkey-7{list-style-type:none}ul.lst-kix_y8664apqgwm5-0{list-style-type:none}ul.lst-kix_y8664apqgwm5-7{list-style-type:none}ul.lst-kix_y8664apqgwm5-6{list-style-type:none}ul.lst-kix_y8664apqgwm5-5{list-style-type:none}ul.lst-kix_y8664apqgwm5-4{list-style-type:none}ul.lst-kix_7kgbo4t4lkey-0{list-style-type:none}ul.lst-kix_7kgbo4t4lkey-1{list-style-type:none}.lst-kix_vy14fvvk8xlp-6>li:before{content:"\0025cf  "}ul.lst-kix_y8664apqgwm5-8{list-style-type:none}.lst-kix_espyab61p86-1>li:before{content:"\0025cb  "}.lst-kix_835rqaclo36m-8>li:before{content:"\0025a0  "}ul.lst-kix_4xof1r20di8m-0{list-style-type:none}ul.lst-kix_x1oy6u58zf2q-0{list-style-type:none}ul.lst-kix_4xof1r20di8m-4{list-style-type:none}ul.lst-kix_4xof1r20di8m-3{list-style-type:none}ul.lst-kix_4xof1r20di8m-2{list-style-type:none}ul.lst-kix_4xof1r20di8m-1{list-style-type:none}ul.lst-kix_4xof1r20di8m-8{list-style-type:none}ul.lst-kix_4xof1r20di8m-7{list-style-type:none}ul.lst-kix_4xof1r20di8m-6{list-style-type:none}ul.lst-kix_4xof1r20di8m-5{list-style-type:none}.lst-kix_x87irn1u7y09-5>li:before{content:"\0025a0  "}.lst-kix_835rqaclo36m-0>li:before{content:"\0025cf  "}ul.lst-kix_mc4pz2k2cid5-0{list-style-type:none}.lst-kix_mc4pz2k2cid5-4>li:before{content:"\0025cb  "}.lst-kix_8deurvnuojkb-7>li:before{content:"\0025cb  "}ul.lst-kix_mc4pz2k2cid5-8{list-style-type:none}ul.lst-kix_x1oy6u58zf2q-8{list-style-type:none}.lst-kix_espyab61p86-5>li:before{content:"\0025a0  "}ul.lst-kix_mc4pz2k2cid5-7{list-style-type:none}ul.lst-kix_x1oy6u58zf2q-7{list-style-type:none}ul.lst-kix_mc4pz2k2cid5-6{list-style-type:none}ul.lst-kix_x1oy6u58zf2q-6{list-style-type:none}ul.lst-kix_mc4pz2k2cid5-5{list-style-type:none}ul.lst-kix_x1oy6u58zf2q-5{list-style-type:none}ul.lst-kix_mc4pz2k2cid5-4{list-style-type:none}ul.lst-kix_x1oy6u58zf2q-4{list-style-type:none}ul.lst-kix_mc4pz2k2cid5-3{list-style-type:none}.lst-kix_x87irn1u7y09-1>li:before{content:"\0025cb  "}ul.lst-kix_x1oy6u58zf2q-3{list-style-type:none}ul.lst-kix_mc4pz2k2cid5-2{list-style-type:none}ul.lst-kix_x1oy6u58zf2q-2{list-style-type:none}ul.lst-kix_mc4pz2k2cid5-1{list-style-type:none}ul.lst-kix_x1oy6u58zf2q-1{list-style-type:none}.lst-kix_v5n0rrdj5hvj-0>li:before{content:"\0025cf  "}ul.lst-kix_o5qywvp9xm4o-1{list-style-type:none}ul.lst-kix_o5qywvp9xm4o-2{list-style-type:none}.lst-kix_djvau7gj2w8b-7>li:before{content:"\0025cb  "}ul.lst-kix_o5qywvp9xm4o-0{list-style-type:none}ul.lst-kix_o5qywvp9xm4o-5{list-style-type:none}ul.lst-kix_o5qywvp9xm4o-6{list-style-type:none}ul.lst-kix_o5qywvp9xm4o-3{list-style-type:none}ul.lst-kix_o5qywvp9xm4o-4{list-style-type:none}.lst-kix_4xof1r20di8m-4>li:before{content:"\0025cb  "}ul.lst-kix_o5qywvp9xm4o-7{list-style-type:none}ul.lst-kix_o5qywvp9xm4o-8{list-style-type:none}.lst-kix_7dvop4c8s0d-8>li:before{content:"\0025a0  "}.lst-kix_mc4pz2k2cid5-8>li:before{content:"\0025a0  "}.lst-kix_djvau7gj2w8b-3>li:before{content:"\0025cf  "}.lst-kix_835rqaclo36m-4>li:before{content:"\0025cb  "}.lst-kix_4xof1r20di8m-8>li:before{content:"\0025a0  "}.lst-kix_7dvop4c8s0d-4>li:before{content:"\0025cb  "}ul.lst-kix_75yzxb4d5d2u-7{list-style-type:none}ul.lst-kix_75yzxb4d5d2u-6{list-style-type:none}ul.lst-kix_75yzxb4d5d2u-8{list-style-type:none}.lst-kix_z8fnyoihpe2u-7>li:before{content:"\0025cb  "}.lst-kix_c2ezjrtxwn6r-4>li:before{content:"\0025cb  "}.lst-kix_9lv5ekihldmd-6>li:before{content:"\0025cf  "}.lst-kix_7u2eln2ijak9-5>li:before{content:"\0025a0  "}.lst-kix_s97cqb78zmi7-8>li:before{content:"\0025a0  "}.lst-kix_4xof1r20di8m-0>li:before{content:"\0025cf  "}.lst-kix_4r25nsaz8j92-7>li:before{content:"\0025cb  "}.lst-kix_s97cqb78zmi7-4>li:before{content:"\0025cb  "}ul.lst-kix_75yzxb4d5d2u-1{list-style-type:none}ul.lst-kix_75yzxb4d5d2u-0{list-style-type:none}.lst-kix_c2ezjrtxwn6r-0>li:before{content:"\0025cf  "}ul.lst-kix_75yzxb4d5d2u-3{list-style-type:none}.lst-kix_9lv5ekihldmd-2>li:before{content:"\0025a0  "}ul.lst-kix_75yzxb4d5d2u-2{list-style-type:none}ul.lst-kix_75yzxb4d5d2u-5{list-style-type:none}ul.lst-kix_75yzxb4d5d2u-4{list-style-type:none}.lst-kix_y8664apqgwm5-7>li:before{content:"\0025cb  "}.lst-kix_whbvygousy3v-4>li:before{content:"\0025cb  "}.lst-kix_whbvygousy3v-8>li:before{content:"\0025a0  "}.lst-kix_s97cqb78zmi7-0>li:before{content:"\0025cf  "}.lst-kix_tjqtpvyutk54-2>li:before{content:"\0025a0  "}.lst-kix_o5qywvp9xm4o-1>li:before{content:"\0025cb  "}.lst-kix_v5n0rrdj5hvj-4>li:before{content:"\0025cb  "}.lst-kix_67l8yl45oi1f-3>li:before{content:"\0025cf  "}.lst-kix_1dcmsdrcn8h-7>li:before{content:"\0025cb  "}.lst-kix_z8fnyoihpe2u-3>li:before{content:"\0025cf  "}.lst-kix_v5n0rrdj5hvj-8>li:before{content:"\0025a0  "}.lst-kix_67l8yl45oi1f-7>li:before{content:"\0025cb  "}.lst-kix_y8664apqgwm5-3>li:before{content:"\0025cf  "}.lst-kix_whbvygousy3v-0>li:before{content:"\0025cf  "}.lst-kix_tjqtpvyutk54-6>li:before{content:"\0025cf  "}.lst-kix_7u2eln2ijak9-1>li:before{content:"\0025cb  "}.lst-kix_mg0k3un0g37b-2>li:before{content:"\0025a0  "}.lst-kix_mg0k3un0g37b-4>li:before{content:"\0025cb  "}.lst-kix_mg0k3un0g37b-7>li:before{content:"\0025cb  "}ul.lst-kix_djvau7gj2w8b-6{list-style-type:none}ul.lst-kix_djvau7gj2w8b-7{list-style-type:none}ul.lst-kix_djvau7gj2w8b-4{list-style-type:none}ul.lst-kix_djvau7gj2w8b-5{list-style-type:none}.lst-kix_mg0k3un0g37b-5>li:before{content:"\0025a0  "}ul.lst-kix_djvau7gj2w8b-8{list-style-type:none}.lst-kix_vudwmvba9uuz-2>li:before{content:"\0025a0  "}.lst-kix_47wnqvlrxwjs-5>li:before{content:"\0025a0  "}.lst-kix_47wnqvlrxwjs-7>li:before{content:"\0025cb  "}.lst-kix_g6yj3lsmcciz-8>li:before{content:"\0025a0  "}ul.lst-kix_djvau7gj2w8b-2{list-style-type:none}ul.lst-kix_djvau7gj2w8b-3{list-style-type:none}ul.lst-kix_djvau7gj2w8b-0{list-style-type:none}ul.lst-kix_djvau7gj2w8b-1{list-style-type:none}.lst-kix_g6yj3lsmcciz-3>li:before{content:"\0025cf  "}ul.lst-kix_mak73ue8ggfd-1{list-style-type:none}.lst-kix_g6yj3lsmcciz-2>li:before{content:"\0025a0  "}ul.lst-kix_mak73ue8ggfd-0{list-style-type:none}.lst-kix_47wnqvlrxwjs-8>li:before{content:"\0025a0  "}ul.lst-kix_mak73ue8ggfd-3{list-style-type:none}.lst-kix_g6yj3lsmcciz-5>li:before{content:"\0025a0  "}ul.lst-kix_mak73ue8ggfd-2{list-style-type:none}ul.lst-kix_mak73ue8ggfd-5{list-style-type:none}ul.lst-kix_mak73ue8ggfd-4{list-style-type:none}ul.lst-kix_mak73ue8ggfd-7{list-style-type:none}ul.lst-kix_mak73ue8ggfd-6{list-style-type:none}ul.lst-kix_mak73ue8ggfd-8{list-style-type:none}ul.lst-kix_fl0ihf9kdb4o-5{list-style-type:none}ul.lst-kix_fl0ihf9kdb4o-6{list-style-type:none}ul.lst-kix_fl0ihf9kdb4o-7{list-style-type:none}.lst-kix_g0xj42mhf4l9-1>li:before{content:"\0025cb  "}ul.lst-kix_fl0ihf9kdb4o-8{list-style-type:none}ul.lst-kix_fl0ihf9kdb4o-1{list-style-type:none}ul.lst-kix_fl0ihf9kdb4o-2{list-style-type:none}ul.lst-kix_tjqtpvyutk54-8{list-style-type:none}ul.lst-kix_fl0ihf9kdb4o-3{list-style-type:none}ul.lst-kix_fl0ihf9kdb4o-4{list-style-type:none}ul.lst-kix_tjqtpvyutk54-6{list-style-type:none}ul.lst-kix_tjqtpvyutk54-7{list-style-type:none}ul.lst-kix_tjqtpvyutk54-4{list-style-type:none}.lst-kix_g6yj3lsmcciz-0>li:before{content:"\0025cf  "}.lst-kix_g0xj42mhf4l9-3>li:before{content:"\0025cf  "}ul.lst-kix_tjqtpvyutk54-5{list-style-type:none}ul.lst-kix_fl0ihf9kdb4o-0{list-style-type:none}.lst-kix_x0h22t9m68z6-1>li:before{content:"\0025cb  "}ul.lst-kix_tjqtpvyutk54-2{list-style-type:none}.lst-kix_yc033gjmfhsr-7>li:before{content:"\0025cb  "}ul.lst-kix_tjqtpvyutk54-3{list-style-type:none}ul.lst-kix_tjqtpvyutk54-0{list-style-type:none}ul.lst-kix_tjqtpvyutk54-1{list-style-type:none}.lst-kix_x0h22t9m68z6-0>li:before{content:"\0025cf  "}.lst-kix_mfpbw01he5fz-7>li:before{content:"\0025cb  "}.lst-kix_mfpbw01he5fz-6>li:before{content:"\0025cf  "}.lst-kix_g0xj42mhf4l9-6>li:before{content:"\0025cf  "}.lst-kix_x0h22t9m68z6-6>li:before{content:"\0025cf  "}.lst-kix_x0h22t9m68z6-3>li:before{content:"\0025cf  "}.lst-kix_g0xj42mhf4l9-8>li:before{content:"\0025a0  "}.lst-kix_irvgnf3nji8s-8>li:before{content:"\0025a0  "}.lst-kix_mfpbw01he5fz-1>li:before{content:"\0025cb  "}.lst-kix_52diw2o8e39w-0>li:before{content:"\0025cf  "}.lst-kix_irvgnf3nji8s-6>li:before{content:"\0025cf  "}.lst-kix_irvgnf3nji8s-3>li:before{content:"\0025cf  "}.lst-kix_mfpbw01he5fz-4>li:before{content:"\0025cb  "}.lst-kix_x0h22t9m68z6-8>li:before{content:"\0025a0  "}.lst-kix_fnh5ojejzhgd-7>li:before{content:"\0025cb  "}ul.lst-kix_yc033gjmfhsr-6{list-style-type:none}ul.lst-kix_yc033gjmfhsr-7{list-style-type:none}ul.lst-kix_yc033gjmfhsr-4{list-style-type:none}ul.lst-kix_yc033gjmfhsr-5{list-style-type:none}.lst-kix_mc4pz2k2cid5-0>li:before{content:"\0025cf  "}.lst-kix_fnh5ojejzhgd-5>li:before{content:"\0025a0  "}.lst-kix_mc4pz2k2cid5-1>li:before{content:"\0025cb  "}ul.lst-kix_yc033gjmfhsr-8{list-style-type:none}.lst-kix_nbzs3aql55ir-2>li:before{content:"\0025a0  "}ul.lst-kix_yc033gjmfhsr-2{list-style-type:none}ul.lst-kix_yc033gjmfhsr-3{list-style-type:none}ul.lst-kix_yc033gjmfhsr-0{list-style-type:none}ul.lst-kix_yc033gjmfhsr-1{list-style-type:none}.lst-kix_47wnqvlrxwjs-2>li:before{content:"\0025a0  "}ul.lst-kix_emz4qwnpv0z7-6{list-style-type:none}ul.lst-kix_emz4qwnpv0z7-7{list-style-type:none}.lst-kix_376ipe9z4ys9-1>li:before{content:"\0025cb  "}ul.lst-kix_emz4qwnpv0z7-4{list-style-type:none}ul.lst-kix_emz4qwnpv0z7-5{list-style-type:none}.lst-kix_8deurvnuojkb-2>li:before{content:"\0025a0  "}.lst-kix_47wnqvlrxwjs-0>li:before{content:"\0025cf  "}.lst-kix_376ipe9z4ys9-2>li:before{content:"\0025a0  "}ul.lst-kix_emz4qwnpv0z7-2{list-style-type:none}.lst-kix_fnh5ojejzhgd-2>li:before{content:"\0025a0  "}ul.lst-kix_emz4qwnpv0z7-3{list-style-type:none}ul.lst-kix_emz4qwnpv0z7-0{list-style-type:none}ul.lst-kix_emz4qwnpv0z7-1{list-style-type:none}.lst-kix_fnh5ojejzhgd-4>li:before{content:"\0025cb  "}.lst-kix_8deurvnuojkb-0>li:before{content:"\0025cf  "}.lst-kix_nbzs3aql55ir-0>li:before{content:"\0025cf  "}ul.lst-kix_emz4qwnpv0z7-8{list-style-type:none}ul.lst-kix_yqf5qsmroeu7-4{list-style-type:none}.lst-kix_ynjmycy189zt-4>li:before{content:"\0025cb  "}ul.lst-kix_yqf5qsmroeu7-3{list-style-type:none}ul.lst-kix_yqf5qsmroeu7-6{list-style-type:none}ul.lst-kix_yqf5qsmroeu7-5{list-style-type:none}ul.lst-kix_yqf5qsmroeu7-8{list-style-type:none}.lst-kix_ynjmycy189zt-2>li:before{content:"\0025a0  "}ul.lst-kix_yqf5qsmroeu7-7{list-style-type:none}.lst-kix_espyab61p86-0>li:before{content:"\0025cf  "}.lst-kix_p2igigmh7ri-1>li:before{content:"\0025cb  "}.lst-kix_376ipe9z4ys9-4>li:before{content:"\0025cb  "}.lst-kix_77y3plo9k29i-7>li:before{content:"\0025cb  "}.lst-kix_vlfbbop29bmy-5>li:before{content:"\0025a0  "}.lst-kix_vlfbbop29bmy-7>li:before{content:"\0025cb  "}ul.lst-kix_yqf5qsmroeu7-0{list-style-type:none}.lst-kix_x1oy6u58zf2q-2>li:before{content:"\0025a0  "}.lst-kix_p2igigmh7ri-3>li:before{content:"\0025cf  "}ul.lst-kix_yqf5qsmroeu7-2{list-style-type:none}.lst-kix_lpf5h46eyihc-6>li:before{content:"\0025cf  "}ul.lst-kix_yqf5qsmroeu7-1{list-style-type:none}.lst-kix_espyab61p86-8>li:before{content:"\0025a0  "}.lst-kix_95omunf7ar-1>li:before{content:"\0025cb  "}.lst-kix_x1oy6u58zf2q-4>li:before{content:"\0025cb  "}.lst-kix_95omunf7ar-3>li:before{content:"\0025cf  "}.lst-kix_pfsmhm470wlg-6>li:before{content:"\0025cf  "}.lst-kix_oeltg7yado54-8>li:before{content:"\0025a0  "}.lst-kix_nbzs3aql55ir-8>li:before{content:"\0025a0  "}.lst-kix_8deurvnuojkb-8>li:before{content:"\0025a0  "}.lst-kix_uf0vm9ltz4d0-1>li:before{content:"\0025cb  "}.lst-kix_uf0vm9ltz4d0-3>li:before{content:"\0025cf  "}.lst-kix_espyab61p86-6>li:before{content:"\0025cf  "}.lst-kix_mc4pz2k2cid5-3>li:before{content:"\0025cf  "}.lst-kix_v5n0rrdj5hvj-1>li:before{content:"\0025cb  "}.lst-kix_52diw2o8e39w-6>li:before{content:"\0025cf  "}.lst-kix_gnntovy9v4k5-3>li:before{content:"\0025cf  "}.lst-kix_52diw2o8e39w-8>li:before{content:"\0025a0  "}.lst-kix_4xof1r20di8m-3>li:before{content:"\0025cf  "}.lst-kix_gnntovy9v4k5-1>li:before{content:"\0025cb  "}.lst-kix_irvgnf3nji8s-0>li:before{content:"\0025cf  "}ul.lst-kix_ez4b0ilstusb-8{list-style-type:none}ul.lst-kix_ez4b0ilstusb-6{list-style-type:none}ul.lst-kix_ez4b0ilstusb-7{list-style-type:none}ul.lst-kix_ez4b0ilstusb-4{list-style-type:none}.lst-kix_oeltg7yado54-0>li:before{content:"\0025cf  "}ul.lst-kix_ez4b0ilstusb-5{list-style-type:none}ul.lst-kix_ez4b0ilstusb-2{list-style-type:none}ul.lst-kix_ez4b0ilstusb-3{list-style-type:none}ul.lst-kix_ez4b0ilstusb-0{list-style-type:none}.lst-kix_oeltg7yado54-2>li:before{content:"\0025a0  "}ul.lst-kix_ez4b0ilstusb-1{list-style-type:none}.lst-kix_7u2eln2ijak9-2>li:before{content:"\0025a0  "}.lst-kix_7u2eln2ijak9-4>li:before{content:"\0025cb  "}.lst-kix_yc033gjmfhsr-2>li:before{content:"\0025a0  "}.lst-kix_kj5ipvbniit8-6>li:before{content:"\0025cf  "}.lst-kix_yc033gjmfhsr-4>li:before{content:"\0025cb  "}.lst-kix_g0xj42mhf4l9-0>li:before{content:"\0025cf  "}.lst-kix_kj5ipvbniit8-0>li:before{content:"\0025cf  "}.lst-kix_4xof1r20di8m-1>li:before{content:"\0025cb  "}.lst-kix_67l8yl45oi1f-0>li:before{content:"\0025cf  "}.lst-kix_pq1l6rjw9q5s-6>li:before{content:"\0025cf  "}.lst-kix_whbvygousy3v-5>li:before{content:"\0025a0  "}ul.lst-kix_7u2eln2ijak9-0{list-style-type:none}ul.lst-kix_7u2eln2ijak9-1{list-style-type:none}.lst-kix_pq1l6rjw9q5s-4>li:before{content:"\0025cb  "}.lst-kix_v5n0rrdj5hvj-3>li:before{content:"\0025cf  "}ul.lst-kix_g6yj3lsmcciz-5{list-style-type:none}.lst-kix_whbvygousy3v-7>li:before{content:"\0025cb  "}ul.lst-kix_g6yj3lsmcciz-6{list-style-type:none}.lst-kix_5lc6nbg1p01p-8>li:before{content:"\0025a0  "}.lst-kix_67l8yl45oi1f-2>li:before{content:"\0025a0  "}ul.lst-kix_g6yj3lsmcciz-7{list-style-type:none}ul.lst-kix_g6yj3lsmcciz-8{list-style-type:none}.lst-kix_tjqtpvyutk54-5>li:before{content:"\0025a0  "}ul.lst-kix_g6yj3lsmcciz-1{list-style-type:none}ul.lst-kix_xushg9nfvd-0{list-style-type:none}ul.lst-kix_g6yj3lsmcciz-2{list-style-type:none}ul.lst-kix_xushg9nfvd-1{list-style-type:none}ul.lst-kix_g6yj3lsmcciz-3{list-style-type:none}ul.lst-kix_xushg9nfvd-2{list-style-type:none}ul.lst-kix_g6yj3lsmcciz-4{list-style-type:none}ul.lst-kix_xushg9nfvd-3{list-style-type:none}.lst-kix_tjqtpvyutk54-3>li:before{content:"\0025cf  "}ul.lst-kix_xushg9nfvd-4{list-style-type:none}ul.lst-kix_xushg9nfvd-5{list-style-type:none}ul.lst-kix_xushg9nfvd-6{list-style-type:none}ul.lst-kix_g6yj3lsmcciz-0{list-style-type:none}ul.lst-kix_xushg9nfvd-7{list-style-type:none}ul.lst-kix_xushg9nfvd-8{list-style-type:none}.lst-kix_vudwmvba9uuz-5>li:before{content:"\0025a0  "}.lst-kix_5lc6nbg1p01p-0>li:before{content:"\0025cf  "}ul.lst-kix_7u2eln2ijak9-6{list-style-type:none}ul.lst-kix_7u2eln2ijak9-7{list-style-type:none}ul.lst-kix_7u2eln2ijak9-8{list-style-type:none}.lst-kix_vudwmvba9uuz-7>li:before{content:"\0025cb  "}.lst-kix_77y3plo9k29i-1>li:before{content:"\0025cb  "}ul.lst-kix_7u2eln2ijak9-2{list-style-type:none}.lst-kix_kj5ipvbniit8-8>li:before{content:"\0025a0  "}ul.lst-kix_7u2eln2ijak9-3{list-style-type:none}.lst-kix_5lc6nbg1p01p-2>li:before{content:"\0025a0  "}ul.lst-kix_7u2eln2ijak9-4{list-style-type:none}.lst-kix_67l8yl45oi1f-8>li:before{content:"\0025a0  "}ul.lst-kix_7u2eln2ijak9-5{list-style-type:none}ul.lst-kix_5lc6nbg1p01p-3{list-style-type:none}.lst-kix_6xdszrkra98x-2>li:before{content:"\0025a0  "}ul.lst-kix_5lc6nbg1p01p-2{list-style-type:none}.lst-kix_c8i4jrv36f65-4>li:before{content:"\0025cb  "}ul.lst-kix_5lc6nbg1p01p-5{list-style-type:none}ul.lst-kix_5lc6nbg1p01p-4{list-style-type:none}ul.lst-kix_5lc6nbg1p01p-7{list-style-type:none}ul.lst-kix_ncrutvqrvzzc-0{list-style-type:none}ul.lst-kix_5lc6nbg1p01p-6{list-style-type:none}.lst-kix_1dcmsdrcn8h-1>li:before{content:"\0025cb  "}ul.lst-kix_5lc6nbg1p01p-8{list-style-type:none}.lst-kix_75yzxb4d5d2u-8>li:before{content:"\0025a0  "}ul.lst-kix_ncrutvqrvzzc-4{list-style-type:none}ul.lst-kix_ncrutvqrvzzc-3{list-style-type:none}ul.lst-kix_ncrutvqrvzzc-2{list-style-type:none}ul.lst-kix_ncrutvqrvzzc-1{list-style-type:none}.lst-kix_75yzxb4d5d2u-3>li:before{content:"\0025cf  "}.lst-kix_spr6x5pb1u0q-7>li:before{content:"\0025cb  "}ul.lst-kix_ncrutvqrvzzc-8{list-style-type:none}ul.lst-kix_ncrutvqrvzzc-7{list-style-type:none}ul.lst-kix_5lc6nbg1p01p-1{list-style-type:none}ul.lst-kix_ncrutvqrvzzc-6{list-style-type:none}ul.lst-kix_5lc6nbg1p01p-0{list-style-type:none}ul.lst-kix_ncrutvqrvzzc-5{list-style-type:none}.lst-kix_7ud9h2t659dd-1>li:before{content:"-  "}.lst-kix_1dcmsdrcn8h-6>li:before{content:"\0025cf  "}.lst-kix_o5qywvp9xm4o-6>li:before{content:"\0025cf  "}.lst-kix_z1654lrb42kb-4>li:before{content:"\0025cb  "}.lst-kix_z1654lrb42kb-7>li:before{content:"\0025cb  "}.lst-kix_cb33oapgqo2g-2>li:before{content:"\0025a0  "}.lst-kix_75yzxb4d5d2u-0>li:before{content:"\0025cf  "}.lst-kix_c8i4jrv36f65-7>li:before{content:"\0025cb  "}ul.lst-kix_bxnghnm226jg-7{list-style-type:none}.lst-kix_o5qywvp9xm4o-3>li:before{content:"\0025cf  "}ul.lst-kix_bxnghnm226jg-6{list-style-type:none}ul.lst-kix_bxnghnm226jg-8{list-style-type:none}.lst-kix_lj1zkd3bpkgx-8>li:before{content:"\0025a0  "}ul.lst-kix_bxnghnm226jg-3{list-style-type:none}ul.lst-kix_47wnqvlrxwjs-0{list-style-type:none}ul.lst-kix_bxnghnm226jg-2{list-style-type:none}ul.lst-kix_47wnqvlrxwjs-1{list-style-type:none}ul.lst-kix_bxnghnm226jg-5{list-style-type:none}ul.lst-kix_47wnqvlrxwjs-2{list-style-type:none}ul.lst-kix_bxnghnm226jg-4{list-style-type:none}ul.lst-kix_47wnqvlrxwjs-3{list-style-type:none}ul.lst-kix_bxnghnm226jg-1{list-style-type:none}ul.lst-kix_bxnghnm226jg-0{list-style-type:none}.lst-kix_9lv5ekihldmd-0>li:before{content:"\0025cf  "}.lst-kix_cb33oapgqo2g-5>li:before{content:"\0025a0  "}.lst-kix_lj1zkd3bpkgx-3>li:before{content:"\0025cf  "}.lst-kix_7ud9h2t659dd-4>li:before{content:"-  "}.lst-kix_f2a6455hkc64-4>li:before{content:"\0025cb  "}.lst-kix_6xdszrkra98x-7>li:before{content:"\0025cb  "}ul.lst-kix_47wnqvlrxwjs-8{list-style-type:none}.lst-kix_c2ezjrtxwn6r-6>li:before{content:"\0025cf  "}ul.lst-kix_47wnqvlrxwjs-4{list-style-type:none}ul.lst-kix_47wnqvlrxwjs-5{list-style-type:none}.lst-kix_spr6x5pb1u0q-4>li:before{content:"\0025cb  "}ul.lst-kix_47wnqvlrxwjs-6{list-style-type:none}.lst-kix_f2a6455hkc64-1>li:before{content:"\0025cb  "}ul.lst-kix_47wnqvlrxwjs-7{list-style-type:none}.lst-kix_lj1zkd3bpkgx-0>li:before{content:"\0025cf  "}.lst-kix_fl0ihf9kdb4o-6>li:before{content:"\0025cf  "}ul.lst-kix_kj5ipvbniit8-0{list-style-type:none}ul.lst-kix_kj5ipvbniit8-1{list-style-type:none}ul.lst-kix_kj5ipvbniit8-2{list-style-type:none}ul.lst-kix_kj5ipvbniit8-3{list-style-type:none}ul.lst-kix_kj5ipvbniit8-4{list-style-type:none}ul.lst-kix_kj5ipvbniit8-5{list-style-type:none}ul.lst-kix_kj5ipvbniit8-6{list-style-type:none}.lst-kix_bxnghnm226jg-5>li:before{content:"\0025a0  "}.lst-kix_5fhkllpes9k2-3>li:before{content:"\0025cf  "}ul.lst-kix_kj5ipvbniit8-7{list-style-type:none}ul.lst-kix_kj5ipvbniit8-8{list-style-type:none}.lst-kix_ez4b0ilstusb-2>li:before{content:"\0025a0  "}.lst-kix_ez4b0ilstusb-5>li:before{content:"\0025a0  "}.lst-kix_bxnghnm226jg-0>li:before{content:"\0025cf  "}.lst-kix_5fhkllpes9k2-8>li:before{content:"\0025a0  "}.lst-kix_fl0ihf9kdb4o-1>li:before{content:"\0025cb  "}.lst-kix_vy14fvvk8xlp-4>li:before{content:"\0025cb  "}.lst-kix_lpf5h46eyihc-1>li:before{content:"\0025cb  "}.lst-kix_vy14fvvk8xlp-7>li:before{content:"\0025cb  "}.lst-kix_pfsmhm470wlg-1>li:before{content:"\0025cb  "}.lst-kix_376ipe9z4ys9-7>li:before{content:"\0025cb  "}.lst-kix_espyab61p86-3>li:before{content:"\0025cf  "}.lst-kix_x87irn1u7y09-3>li:before{content:"\0025cf  "}ul.lst-kix_u5ox7nmfuwqp-7{list-style-type:none}ul.lst-kix_u5ox7nmfuwqp-8{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-8{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-7{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-6{list-style-type:none}.lst-kix_8deurvnuojkb-5>li:before{content:"\0025a0  "}.lst-kix_mc4pz2k2cid5-6>li:before{content:"\0025cf  "}.lst-kix_p2igigmh7ri-6>li:before{content:"\0025cf  "}.lst-kix_nbzs3aql55ir-5>li:before{content:"\0025a0  "}.lst-kix_x1oy6u58zf2q-7>li:before{content:"\0025cb  "}.lst-kix_ynjmycy189zt-7>li:before{content:"\0025cb  "}.lst-kix_4xof1r20di8m-6>li:before{content:"\0025cf  "}ul.lst-kix_lg6blqs8wii2-0{list-style-type:none}ul.lst-kix_x0h22t9m68z6-0{list-style-type:none}ul.lst-kix_x0h22t9m68z6-2{list-style-type:none}ul.lst-kix_x0h22t9m68z6-1{list-style-type:none}ul.lst-kix_lg6blqs8wii2-4{list-style-type:none}ul.lst-kix_lg6blqs8wii2-3{list-style-type:none}.lst-kix_52diw2o8e39w-3>li:before{content:"\0025cf  "}ul.lst-kix_lg6blqs8wii2-2{list-style-type:none}.lst-kix_gnntovy9v4k5-6>li:before{content:"\0025cf  "}ul.lst-kix_lg6blqs8wii2-1{list-style-type:none}ul.lst-kix_x0h22t9m68z6-8{list-style-type:none}ul.lst-kix_4r25nsaz8j92-6{list-style-type:none}ul.lst-kix_x0h22t9m68z6-7{list-style-type:none}ul.lst-kix_4r25nsaz8j92-5{list-style-type:none}ul.lst-kix_4r25nsaz8j92-4{list-style-type:none}.lst-kix_u5ox7nmfuwqp-0>li:before{content:"\0025cf  "}.lst-kix_u5ox7nmfuwqp-8>li:before{content:"\0025a0  "}ul.lst-kix_4r25nsaz8j92-3{list-style-type:none}.lst-kix_95omunf7ar-6>li:before{content:"\0025cf  "}ul.lst-kix_x0h22t9m68z6-4{list-style-type:none}ul.lst-kix_4r25nsaz8j92-2{list-style-type:none}.lst-kix_oeltg7yado54-5>li:before{content:"\0025a0  "}ul.lst-kix_x0h22t9m68z6-3{list-style-type:none}ul.lst-kix_4r25nsaz8j92-1{list-style-type:none}ul.lst-kix_x0h22t9m68z6-6{list-style-type:none}ul.lst-kix_4r25nsaz8j92-0{list-style-type:none}.lst-kix_uf0vm9ltz4d0-6>li:before{content:"\0025cf  "}ul.lst-kix_x0h22t9m68z6-5{list-style-type:none}ul.lst-kix_u5ox7nmfuwqp-3{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-5{list-style-type:none}ul.lst-kix_u5ox7nmfuwqp-4{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-4{list-style-type:none}ul.lst-kix_u5ox7nmfuwqp-5{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-3{list-style-type:none}ul.lst-kix_u5ox7nmfuwqp-6{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-2{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-1{list-style-type:none}ul.lst-kix_u5ox7nmfuwqp-0{list-style-type:none}ul.lst-kix_lj1zkd3bpkgx-0{list-style-type:none}ul.lst-kix_u5ox7nmfuwqp-1{list-style-type:none}ul.lst-kix_4r25nsaz8j92-8{list-style-type:none}ul.lst-kix_u5ox7nmfuwqp-2{list-style-type:none}ul.lst-kix_4r25nsaz8j92-7{list-style-type:none}.lst-kix_7dvop4c8s0d-2>li:before{content:"\0025a0  "}ul.lst-kix_rkobndvsr1ef-0{list-style-type:none}ul.lst-kix_lg6blqs8wii2-8{list-style-type:none}ul.lst-kix_rkobndvsr1ef-1{list-style-type:none}ul.lst-kix_lg6blqs8wii2-7{list-style-type:none}.lst-kix_bxnghnm226jg-8>li:before{content:"\0025a0  "}ul.lst-kix_lg6blqs8wii2-6{list-style-type:none}.lst-kix_5fhkllpes9k2-0>li:before{content:"\0025cf  "}ul.lst-kix_lg6blqs8wii2-5{list-style-type:none}.lst-kix_835rqaclo36m-6>li:before{content:"\0025cf  "}.lst-kix_djvau7gj2w8b-1>li:before{content:"\0025cb  "}.lst-kix_vlfbbop29bmy-2>li:before{content:"\0025a0  "}ul.lst-kix_rkobndvsr1ef-8{list-style-type:none}.lst-kix_2kif4r65nu02-7>li:before{content:"\0025cb  "}ul.lst-kix_rkobndvsr1ef-6{list-style-type:none}ul.lst-kix_rkobndvsr1ef-7{list-style-type:none}ul.lst-kix_rkobndvsr1ef-4{list-style-type:none}ul.lst-kix_rkobndvsr1ef-5{list-style-type:none}ul.lst-kix_rkobndvsr1ef-2{list-style-type:none}ul.lst-kix_rkobndvsr1ef-3{list-style-type:none}.lst-kix_9lv5ekihldmd-8>li:before{content:"\0025a0  "}.lst-kix_7u2eln2ijak9-7>li:before{content:"\0025cb  "}.lst-kix_yqf5qsmroeu7-4>li:before{content:"\0025cb  "}.lst-kix_kj5ipvbniit8-3>li:before{content:"\0025cf  "}.lst-kix_oyq83w39gfpd-3>li:before{content:"\0025cf  "}.lst-kix_a603rvteeny0-5>li:before{content:"\0025a0  "}.lst-kix_s97cqb78zmi7-6>li:before{content:"\0025cf  "}.lst-kix_tjqtpvyutk54-0>li:before{content:"\0025cf  "}.lst-kix_y8664apqgwm5-5>li:before{content:"\0025a0  "}.lst-kix_rkobndvsr1ef-7>li:before{content:"\0025cb  "}.lst-kix_z8fnyoihpe2u-1>li:before{content:"\0025cb  "}.lst-kix_emz4qwnpv0z7-4>li:before{content:"\0025cb  "}.lst-kix_v5n0rrdj5hvj-6>li:before{content:"\0025cf  "}.lst-kix_67l8yl45oi1f-5>li:before{content:"\0025a0  "}.lst-kix_5lc6nbg1p01p-5>li:before{content:"\0025a0  "}li.li-bullet-0:before{margin-left:-18pt;white-space:nowrap;display:inline-block;min-width:18pt}.lst-kix_pq1l6rjw9q5s-1>li:before{content:"\0025cb  "}ul.lst-kix_lpf5h46eyihc-1{list-style-type:none}ul.lst-kix_6xdszrkra98x-0{list-style-type:none}ul.lst-kix_lpf5h46eyihc-0{list-style-type:none}ul.lst-kix_lpf5h46eyihc-3{list-style-type:none}ul.lst-kix_lpf5h46eyihc-2{list-style-type:none}.lst-kix_b6gyq8ilc0v0-3>li:before{content:"\0025cf  "}ul.lst-kix_lpf5h46eyihc-5{list-style-type:none}ul.lst-kix_lpf5h46eyihc-4{list-style-type:none}.lst-kix_77y3plo9k29i-4>li:before{content:"\0025cb  "}ul.lst-kix_lpf5h46eyihc-7{list-style-type:none}ul.lst-kix_lpf5h46eyihc-6{list-style-type:none}ul.lst-kix_6xdszrkra98x-7{list-style-type:none}ul.lst-kix_6xdszrkra98x-8{list-style-type:none}.lst-kix_whbvygousy3v-2>li:before{content:"\0025a0  "}ul.lst-kix_6xdszrkra98x-5{list-style-type:none}ul.lst-kix_6xdszrkra98x-6{list-style-type:none}ul.lst-kix_6xdszrkra98x-3{list-style-type:none}ul.lst-kix_6xdszrkra98x-4{list-style-type:none}.lst-kix_tjqtpvyutk54-8>li:before{content:"\0025a0  "}ul.lst-kix_6xdszrkra98x-1{list-style-type:none}.lst-kix_xushg9nfvd-6>li:before{content:"\0025cf  "}ul.lst-kix_6xdszrkra98x-2{list-style-type:none}.lst-kix_hffh46jr22us-7>li:before{content:"\0025cb  "}ul.lst-kix_lpf5h46eyihc-8{list-style-type:none}.lst-kix_hffh46jr22us-6>li:before{content:"\0025cf  "}.lst-kix_hffh46jr22us-5>li:before{content:"\0025a0  "}ul.lst-kix_mfpbw01he5fz-8{list-style-type:none}.lst-kix_hffh46jr22us-3>li:before{content:"\0025cf  "}.lst-kix_hffh46jr22us-4>li:before{content:"\0025cb  "}ul.lst-kix_mfpbw01he5fz-7{list-style-type:none}ul.lst-kix_mfpbw01he5fz-6{list-style-type:none}ul.lst-kix_mfpbw01he5fz-5{list-style-type:none}ul.lst-kix_mfpbw01he5fz-4{list-style-type:none}ul.lst-kix_mfpbw01he5fz-3{list-style-type:none}ul.lst-kix_mfpbw01he5fz-2{list-style-type:none}.lst-kix_hffh46jr22us-0>li:before{content:"\0025cf  "}.lst-kix_hffh46jr22us-1>li:before{content:"\0025cb  "}.lst-kix_hffh46jr22us-2>li:before{content:"\0025a0  "}ul.lst-kix_mfpbw01he5fz-1{list-style-type:none}ul.lst-kix_mfpbw01he5fz-0{list-style-type:none}.lst-kix_hffh46jr22us-8>li:before{content:"\0025a0  "}.lst-kix_44zor6ujv0yu-0>li:before{content:"\0025cf  "}.lst-kix_mak73ue8ggfd-0>li:before{content:"\0025cf  "}.lst-kix_mak73ue8ggfd-1>li:before{content:"\0025cb  "}.lst-kix_44zor6ujv0yu-2>li:before{content:"\0025a0  "}.lst-kix_44zor6ujv0yu-1>li:before{content:"\0025cb  "}.lst-kix_mak73ue8ggfd-4>li:before{content:"\0025cb  "}.lst-kix_mak73ue8ggfd-3>li:before{content:"\0025cf  "}.lst-kix_mak73ue8ggfd-5>li:before{content:"\0025a0  "}.lst-kix_mak73ue8ggfd-2>li:before{content:"\0025a0  "}.lst-kix_mak73ue8ggfd-6>li:before{content:"\0025cf  "}.lst-kix_44zor6ujv0yu-6>li:before{content:"\0025cf  "}.lst-kix_44zor6ujv0yu-8>li:before{content:"\0025a0  "}.lst-kix_44zor6ujv0yu-3>li:before{content:"\0025cf  "}.lst-kix_44zor6ujv0yu-7>li:before{content:"\0025cb  "}.lst-kix_44zor6ujv0yu-4>li:before{content:"\0025cb  "}.lst-kix_44zor6ujv0yu-5>li:before{content:"\0025a0  "}ul.lst-kix_67l8yl45oi1f-0{list-style-type:none}.lst-kix_rkobndvsr1ef-8>li:before{content:"\0025a0  "}ul.lst-kix_67l8yl45oi1f-7{list-style-type:none}ul.lst-kix_67l8yl45oi1f-8{list-style-type:none}ul.lst-kix_67l8yl45oi1f-5{list-style-type:none}ul.lst-kix_67l8yl45oi1f-6{list-style-type:none}ul.lst-kix_67l8yl45oi1f-3{list-style-type:none}ul.lst-kix_67l8yl45oi1f-4{list-style-type:none}ul.lst-kix_67l8yl45oi1f-1{list-style-type:none}ul.lst-kix_67l8yl45oi1f-2{list-style-type:none}.lst-kix_a603rvteeny0-6>li:before{content:"\0025cf  "}.lst-kix_u5ox7nmfuwqp-3>li:before{content:"\0025cf  "}.lst-kix_u5ox7nmfuwqp-7>li:before{content:"\0025cb  "}.lst-kix_oyq83w39gfpd-8>li:before{content:"\0025a0  "}ul.lst-kix_cb33oapgqo2g-3{list-style-type:none}ul.lst-kix_f2a6455hkc64-0{list-style-type:none}.lst-kix_mak73ue8ggfd-8>li:before{content:"\0025a0  "}ul.lst-kix_cb33oapgqo2g-2{list-style-type:none}ul.lst-kix_f2a6455hkc64-1{list-style-type:none}ul.lst-kix_cb33oapgqo2g-5{list-style-type:none}ul.lst-kix_cb33oapgqo2g-4{list-style-type:none}ul.lst-kix_f2a6455hkc64-4{list-style-type:none}.lst-kix_a603rvteeny0-8>li:before{content:"\0025a0  "}ul.lst-kix_f2a6455hkc64-5{list-style-type:none}ul.lst-kix_cb33oapgqo2g-1{list-style-type:none}ul.lst-kix_f2a6455hkc64-2{list-style-type:none}.lst-kix_u5ox7nmfuwqp-1>li:before{content:"\0025cb  "}ul.lst-kix_cb33oapgqo2g-0{list-style-type:none}ul.lst-kix_f2a6455hkc64-3{list-style-type:none}ul.lst-kix_f2a6455hkc64-8{list-style-type:none}ul.lst-kix_f2a6455hkc64-6{list-style-type:none}ul.lst-kix_f2a6455hkc64-7{list-style-type:none}.lst-kix_u5ox7nmfuwqp-5>li:before{content:"\0025a0  "}.lst-kix_2kif4r65nu02-8>li:before{content:"\0025a0  "}.lst-kix_b6gyq8ilc0v0-8>li:before{content:"\0025a0  "}.lst-kix_xushg9nfvd-5>li:before{content:"\0025a0  "}.lst-kix_xushg9nfvd-7>li:before{content:"\0025cb  "}ul.lst-kix_v5n0rrdj5hvj-2{list-style-type:none}ul.lst-kix_v5n0rrdj5hvj-1{list-style-type:none}ul.lst-kix_v5n0rrdj5hvj-0{list-style-type:none}.lst-kix_yqf5qsmroeu7-7>li:before{content:"\0025cb  "}.lst-kix_yqf5qsmroeu7-5>li:before{content:"\0025a0  "}.lst-kix_b6gyq8ilc0v0-4>li:before{content:"\0025cb  "}.lst-kix_b6gyq8ilc0v0-6>li:before{content:"\0025cf  "}.lst-kix_xushg9nfvd-1>li:before{content:"\0025cb  "}.lst-kix_xushg9nfvd-3>li:before{content:"\0025cf  "}.lst-kix_2kif4r65nu02-2>li:before{content:"\0025a0  "}.lst-kix_oyq83w39gfpd-2>li:before{content:"\0025a0  "}.lst-kix_yqf5qsmroeu7-1>li:before{content:"\0025cb  "}.lst-kix_emz4qwnpv0z7-7>li:before{content:"\0025cb  "}.lst-kix_yqf5qsmroeu7-3>li:before{content:"\0025cf  "}.lst-kix_emz4qwnpv0z7-5>li:before{content:"\0025a0  "}.lst-kix_oyq83w39gfpd-4>li:before{content:"\0025cb  "}ul.lst-kix_v5n0rrdj5hvj-6{list-style-type:none}ul.lst-kix_v5n0rrdj5hvj-5{list-style-type:none}.lst-kix_2kif4r65nu02-4>li:before{content:"\0025cb  "}ul.lst-kix_v5n0rrdj5hvj-4{list-style-type:none}ul.lst-kix_v5n0rrdj5hvj-3{list-style-type:none}.lst-kix_a603rvteeny0-4>li:before{content:"\0025cb  "}.lst-kix_2kif4r65nu02-6>li:before{content:"\0025cf  "}ul.lst-kix_v5n0rrdj5hvj-8{list-style-type:none}ul.lst-kix_v5n0rrdj5hvj-7{list-style-type:none}.lst-kix_oyq83w39gfpd-6>li:before{content:"\0025cf  "}ul.lst-kix_g0xj42mhf4l9-5{list-style-type:none}ul.lst-kix_g0xj42mhf4l9-4{list-style-type:none}.lst-kix_rkobndvsr1ef-2>li:before{content:"\0025a0  "}ul.lst-kix_g0xj42mhf4l9-3{list-style-type:none}ul.lst-kix_g0xj42mhf4l9-2{list-style-type:none}.lst-kix_emz4qwnpv0z7-1>li:before{content:"\0025cb  "}ul.lst-kix_g0xj42mhf4l9-8{list-style-type:none}.lst-kix_rkobndvsr1ef-0>li:before{content:"\0025cf  "}.lst-kix_rkobndvsr1ef-4>li:before{content:"\0025cb  "}ul.lst-kix_g0xj42mhf4l9-7{list-style-type:none}ul.lst-kix_g0xj42mhf4l9-6{list-style-type:none}.lst-kix_emz4qwnpv0z7-3>li:before{content:"\0025cf  "}.lst-kix_a603rvteeny0-2>li:before{content:"\0025a0  "}.lst-kix_rkobndvsr1ef-6>li:before{content:"\0025cf  "}.lst-kix_z1654lrb42kb-8>li:before{content:"\0025a0  "}.lst-kix_a603rvteeny0-0>li:before{content:"\0025cf  "}ul.lst-kix_espyab61p86-1{list-style-type:none}.lst-kix_b6gyq8ilc0v0-0>li:before{content:"\0025cf  "}.lst-kix_b6gyq8ilc0v0-2>li:before{content:"\0025a0  "}ul.lst-kix_espyab61p86-0{list-style-type:none}ul.lst-kix_espyab61p86-3{list-style-type:none}ul.lst-kix_espyab61p86-2{list-style-type:none}ul.lst-kix_espyab61p86-5{list-style-type:none}ul.lst-kix_espyab61p86-4{list-style-type:none}.lst-kix_oyq83w39gfpd-0>li:before{content:"\0025cf  "}ul.lst-kix_espyab61p86-7{list-style-type:none}ul.lst-kix_espyab61p86-6{list-style-type:none}ul.lst-kix_espyab61p86-8{list-style-type:none}ul.lst-kix_g0xj42mhf4l9-1{list-style-type:none}ul.lst-kix_g0xj42mhf4l9-0{list-style-type:none}.lst-kix_z1654lrb42kb-2>li:before{content:"\0025a0  "}.lst-kix_6xdszrkra98x-0>li:before{content:"\0025cf  "}.lst-kix_6xdszrkra98x-8>li:before{content:"\0025a0  "}.lst-kix_6xdszrkra98x-1>li:before{content:"\0025cb  "}.lst-kix_z1654lrb42kb-1>li:before{content:"\0025cb  "}ul.lst-kix_77y3plo9k29i-6{list-style-type:none}ul.lst-kix_whbvygousy3v-8{list-style-type:none}.lst-kix_f2a6455hkc64-6>li:before{content:"\0025cf  "}ul.lst-kix_77y3plo9k29i-7{list-style-type:none}ul.lst-kix_whbvygousy3v-7{list-style-type:none}ul.lst-kix_77y3plo9k29i-8{list-style-type:none}.lst-kix_z1654lrb42kb-6>li:before{content:"\0025cf  "}.lst-kix_cb33oapgqo2g-3>li:before{content:"\0025cf  "}ul.lst-kix_77y3plo9k29i-2{list-style-type:none}ul.lst-kix_77y3plo9k29i-3{list-style-type:none}ul.lst-kix_77y3plo9k29i-4{list-style-type:none}.lst-kix_f2a6455hkc64-7>li:before{content:"\0025cb  "}ul.lst-kix_77y3plo9k29i-5{list-style-type:none}ul.lst-kix_whbvygousy3v-0{list-style-type:none}ul.lst-kix_77y3plo9k29i-0{list-style-type:none}ul.lst-kix_whbvygousy3v-2{list-style-type:none}ul.lst-kix_77y3plo9k29i-1{list-style-type:none}ul.lst-kix_whbvygousy3v-1{list-style-type:none}ul.lst-kix_whbvygousy3v-4{list-style-type:none}ul.lst-kix_whbvygousy3v-3{list-style-type:none}ul.lst-kix_whbvygousy3v-6{list-style-type:none}.lst-kix_z1654lrb42kb-5>li:before{content:"\0025a0  "}.lst-kix_cb33oapgqo2g-0>li:before{content:"\0025cf  "}ul.lst-kix_whbvygousy3v-5{list-style-type:none}ul.lst-kix_vlfbbop29bmy-2{list-style-type:none}ul.lst-kix_vlfbbop29bmy-1{list-style-type:none}ul.lst-kix_vlfbbop29bmy-0{list-style-type:none}.lst-kix_ez4b0ilstusb-8>li:before{content:"\0025a0  "}ul.lst-kix_vlfbbop29bmy-8{list-style-type:none}ul.lst-kix_vlfbbop29bmy-7{list-style-type:none}ul.lst-kix_vlfbbop29bmy-6{list-style-type:none}ul.lst-kix_vlfbbop29bmy-5{list-style-type:none}ul.lst-kix_vlfbbop29bmy-4{list-style-type:none}.lst-kix_cb33oapgqo2g-4>li:before{content:"\0025cb  "}ul.lst-kix_vlfbbop29bmy-3{list-style-type:none}.lst-kix_ez4b0ilstusb-7>li:before{content:"\0025cb  "}.lst-kix_f2a6455hkc64-3>li:before{content:"\0025cf  "}.lst-kix_f2a6455hkc64-2>li:before{content:"\0025a0  "}.lst-kix_cb33oapgqo2g-7>li:before{content:"\0025cb  "}.lst-kix_6xdszrkra98x-4>li:before{content:"\0025cb  "}.lst-kix_6xdszrkra98x-5>li:before{content:"\0025a0  "}.lst-kix_cb33oapgqo2g-8>li:before{content:"\0025a0  "}ul.lst-kix_n86quw5wooza-0{list-style-type:none}ul.lst-kix_n86quw5wooza-6{list-style-type:none}ul.lst-kix_oeltg7yado54-4{list-style-type:none}ul.lst-kix_n86quw5wooza-5{list-style-type:none}ul.lst-kix_oeltg7yado54-3{list-style-type:none}ul.lst-kix_n86quw5wooza-8{list-style-type:none}ul.lst-kix_oeltg7yado54-2{list-style-type:none}ul.lst-kix_n86quw5wooza-7{list-style-type:none}ul.lst-kix_oeltg7yado54-1{list-style-type:none}.lst-kix_ez4b0ilstusb-0>li:before{content:"\0025cf  "}ul.lst-kix_n86quw5wooza-2{list-style-type:none}ul.lst-kix_95omunf7ar-1{list-style-type:none}ul.lst-kix_oeltg7yado54-8{list-style-type:none}ul.lst-kix_n86quw5wooza-1{list-style-type:none}ul.lst-kix_95omunf7ar-0{list-style-type:none}ul.lst-kix_oeltg7yado54-7{list-style-type:none}ul.lst-kix_n86quw5wooza-4{list-style-type:none}ul.lst-kix_95omunf7ar-3{list-style-type:none}ul.lst-kix_oeltg7yado54-6{list-style-type:none}ul.lst-kix_n86quw5wooza-3{list-style-type:none}.lst-kix_bxnghnm226jg-3>li:before{content:"\0025cf  "}ul.lst-kix_95omunf7ar-2{list-style-type:none}ul.lst-kix_oeltg7yado54-5{list-style-type:none}ul.lst-kix_95omunf7ar-5{list-style-type:none}ul.lst-kix_95omunf7ar-4{list-style-type:none}ul.lst-kix_95omunf7ar-7{list-style-type:none}.lst-kix_bxnghnm226jg-2>li:before{content:"\0025a0  "}ul.lst-kix_95omunf7ar-6{list-style-type:none}.lst-kix_ez4b0ilstusb-4>li:before{content:"\0025cb  "}ul.lst-kix_95omunf7ar-8{list-style-type:none}.lst-kix_ez4b0ilstusb-3>li:before{content:"\0025cf  "}.lst-kix_lpf5h46eyihc-0>li:before{content:"\0025cf  "}ul.lst-kix_oeltg7yado54-0{list-style-type:none}.lst-kix_pfsmhm470wlg-4>li:before{content:"\0025cb  "}.lst-kix_lpf5h46eyihc-3>li:before{content:"\0025cf  "}.lst-kix_pfsmhm470wlg-3>li:before{content:"\0025cf  "}.lst-kix_lpf5h46eyihc-4>li:before{content:"\0025cb  "}.lst-kix_pfsmhm470wlg-0>li:before{content:"\0025cf  "}ul.lst-kix_mg0k3un0g37b-0{list-style-type:none}.lst-kix_ynjmycy189zt-1>li:before{content:"\0025cb  "}.lst-kix_ynjmycy189zt-5>li:before{content:"\0025a0  "}.lst-kix_vlfbbop29bmy-8>li:before{content:"\0025a0  "}.lst-kix_376ipe9z4ys9-5>li:before{content:"\0025a0  "}.lst-kix_p2igigmh7ri-4>li:before{content:"\0025cb  "}.lst-kix_x1oy6u58zf2q-1>li:before{content:"\0025cb  "}.lst-kix_77y3plo9k29i-6>li:before{content:"\0025cf  "}ul.lst-kix_pq1l6rjw9q5s-0{list-style-type:none}ul.lst-kix_5fhkllpes9k2-2{list-style-type:none}ul.lst-kix_pq1l6rjw9q5s-1{list-style-type:none}ul.lst-kix_5fhkllpes9k2-1{list-style-type:none}.lst-kix_95omunf7ar-0>li:before{content:"\0025cf  "}ul.lst-kix_5fhkllpes9k2-0{list-style-type:none}ul.lst-kix_pq1l6rjw9q5s-4{list-style-type:none}.lst-kix_uf0vm9ltz4d0-0>li:before{content:"\0025cf  "}.lst-kix_lpf5h46eyihc-7>li:before{content:"\0025cb  "}ul.lst-kix_pq1l6rjw9q5s-5{list-style-type:none}ul.lst-kix_pq1l6rjw9q5s-2{list-style-type:none}ul.lst-kix_pq1l6rjw9q5s-3{list-style-type:none}ul.lst-kix_mg0k3un0g37b-6{list-style-type:none}ul.lst-kix_mg0k3un0g37b-5{list-style-type:none}.lst-kix_pfsmhm470wlg-7>li:before{content:"\0025cb  "}ul.lst-kix_5fhkllpes9k2-8{list-style-type:none}ul.lst-kix_mg0k3un0g37b-8{list-style-type:none}ul.lst-kix_5fhkllpes9k2-7{list-style-type:none}ul.lst-kix_mg0k3un0g37b-7{list-style-type:none}.lst-kix_p2igigmh7ri-8>li:before{content:"\0025a0  "}ul.lst-kix_5fhkllpes9k2-6{list-style-type:none}ul.lst-kix_mg0k3un0g37b-2{list-style-type:none}.lst-kix_nbzs3aql55ir-7>li:before{content:"\0025cb  "}ul.lst-kix_5fhkllpes9k2-5{list-style-type:none}ul.lst-kix_mg0k3un0g37b-1{list-style-type:none}.lst-kix_x1oy6u58zf2q-5>li:before{content:"\0025a0  "}ul.lst-kix_5fhkllpes9k2-4{list-style-type:none}ul.lst-kix_mg0k3un0g37b-4{list-style-type:none}ul.lst-kix_5fhkllpes9k2-3{list-style-type:none}ul.lst-kix_mg0k3un0g37b-3{list-style-type:none}.lst-kix_95omunf7ar-8>li:before{content:"\0025a0  "}.lst-kix_a603rvteeny0-7>li:before{content:"\0025cb  "}.lst-kix_oeltg7yado54-3>li:before{content:"\0025cf  "}.lst-kix_52diw2o8e39w-5>li:before{content:"\0025a0  "}.lst-kix_u5ox7nmfuwqp-6>li:before{content:"\0025cf  "}.lst-kix_irvgnf3nji8s-1>li:before{content:"\0025cb  "}.lst-kix_uf0vm9ltz4d0-4>li:before{content:"\0025cb  "}.lst-kix_uf0vm9ltz4d0-8>li:before{content:"\0025a0  "}.lst-kix_95omunf7ar-4>li:before{content:"\0025cb  "}.lst-kix_oeltg7yado54-7>li:before{content:"\0025cb  "}.lst-kix_mak73ue8ggfd-7>li:before{content:"\0025cb  "}.lst-kix_u5ox7nmfuwqp-2>li:before{content:"\0025a0  "}.lst-kix_gnntovy9v4k5-0>li:before{content:"\0025cf  "}.lst-kix_gnntovy9v4k5-8>li:before{content:"\0025a0  "}.lst-kix_bxnghnm226jg-6>li:before{content:"\0025cf  "}.lst-kix_vlfbbop29bmy-0>li:before{content:"\0025cf  "}.lst-kix_vlfbbop29bmy-4>li:before{content:"\0025cb  "}.lst-kix_p2igigmh7ri-0>li:before{content:"\0025cf  "}.lst-kix_gnntovy9v4k5-4>li:before{content:"\0025cb  "}.lst-kix_yc033gjmfhsr-5>li:before{content:"\0025a0  "}.lst-kix_xushg9nfvd-4>li:before{content:"\0025cb  "}.lst-kix_xushg9nfvd-8>li:before{content:"\0025a0  "}.lst-kix_b6gyq8ilc0v0-5>li:before{content:"\0025a0  "}.lst-kix_yqf5qsmroeu7-6>li:before{content:"\0025cf  "}.lst-kix_2kif4r65nu02-1>li:before{content:"\0025cb  "}.lst-kix_kj5ipvbniit8-5>li:before{content:"\0025a0  "}.lst-kix_yqf5qsmroeu7-2>li:before{content:"\0025a0  "}.lst-kix_emz4qwnpv0z7-6>li:before{content:"\0025cf  "}ul.lst-kix_c2ezjrtxwn6r-8{list-style-type:none}ul.lst-kix_c2ezjrtxwn6r-7{list-style-type:none}ul.lst-kix_c2ezjrtxwn6r-6{list-style-type:none}.lst-kix_xushg9nfvd-0>li:before{content:"\0025cf  "}ul.lst-kix_c2ezjrtxwn6r-5{list-style-type:none}.lst-kix_yc033gjmfhsr-1>li:before{content:"\0025cb  "}.lst-kix_a603rvteeny0-3>li:before{content:"\0025cf  "}ul.lst-kix_c2ezjrtxwn6r-4{list-style-type:none}ul.lst-kix_c2ezjrtxwn6r-3{list-style-type:none}.lst-kix_oyq83w39gfpd-5>li:before{content:"\0025a0  "}ul.lst-kix_c2ezjrtxwn6r-2{list-style-type:none}ul.lst-kix_c2ezjrtxwn6r-1{list-style-type:none}ul.lst-kix_c2ezjrtxwn6r-0{list-style-type:none}.lst-kix_2kif4r65nu02-5>li:before{content:"\0025a0  "}.lst-kix_kj5ipvbniit8-1>li:before{content:"\0025cb  "}ul.lst-kix_52diw2o8e39w-7{list-style-type:none}ul.lst-kix_52diw2o8e39w-8{list-style-type:none}.lst-kix_pq1l6rjw9q5s-3>li:before{content:"\0025cf  "}.lst-kix_pq1l6rjw9q5s-7>li:before{content:"\0025cb  "}ul.lst-kix_pq1l6rjw9q5s-8{list-style-type:none}.lst-kix_5lc6nbg1p01p-7>li:before{content:"\0025cb  "}ul.lst-kix_52diw2o8e39w-0{list-style-type:none}ul.lst-kix_pq1l6rjw9q5s-6{list-style-type:none}ul.lst-kix_52diw2o8e39w-1{list-style-type:none}.lst-kix_emz4qwnpv0z7-2>li:before{content:"\0025a0  "}ul.lst-kix_pq1l6rjw9q5s-7{list-style-type:none}ul.lst-kix_52diw2o8e39w-2{list-style-type:none}ul.lst-kix_52diw2o8e39w-3{list-style-type:none}.lst-kix_rkobndvsr1ef-5>li:before{content:"\0025a0  "}ul.lst-kix_52diw2o8e39w-4{list-style-type:none}ul.lst-kix_52diw2o8e39w-5{list-style-type:none}ul.lst-kix_52diw2o8e39w-6{list-style-type:none}.lst-kix_vudwmvba9uuz-4>li:before{content:"\0025cb  "}.lst-kix_5lc6nbg1p01p-3>li:before{content:"\0025cf  "}.lst-kix_b6gyq8ilc0v0-1>li:before{content:"\0025cb  "}.lst-kix_oyq83w39gfpd-1>li:before{content:"\0025cb  "}.lst-kix_rkobndvsr1ef-1>li:before{content:"\0025cb  "}.lst-kix_77y3plo9k29i-2>li:before{content:"\0025a0  "}.lst-kix_vudwmvba9uuz-8>li:before{content:"\0025a0  "}ul.lst-kix_gnntovy9v4k5-2{list-style-type:none}ul.lst-kix_gnntovy9v4k5-1{list-style-type:none}ul.lst-kix_rwpeiwyra0dr-0{list-style-type:none}.lst-kix_mg0k3un0g37b-0>li:before{content:"\0025cf  "}ul.lst-kix_gnntovy9v4k5-4{list-style-type:none}ul.lst-kix_rwpeiwyra0dr-1{list-style-type:none}ul.lst-kix_gnntovy9v4k5-3{list-style-type:none}ul.lst-kix_rwpeiwyra0dr-2{list-style-type:none}.lst-kix_mg0k3un0g37b-1>li:before{content:"\0025cb  "}ul.lst-kix_gnntovy9v4k5-0{list-style-type:none}.lst-kix_mg0k3un0g37b-3>li:before{content:"\0025cf  "}ul.lst-kix_c8i4jrv36f65-4{list-style-type:none}ul.lst-kix_c8i4jrv36f65-3{list-style-type:none}.lst-kix_47wnqvlrxwjs-3>li:before{content:"\0025cf  "}ul.lst-kix_c8i4jrv36f65-2{list-style-type:none}.lst-kix_mg0k3un0g37b-6>li:before{content:"\0025cf  "}.lst-kix_mg0k3un0g37b-8>li:before{content:"\0025a0  "}ul.lst-kix_c8i4jrv36f65-1{list-style-type:none}.lst-kix_vudwmvba9uuz-3>li:before{content:"\0025cf  "}.lst-kix_47wnqvlrxwjs-4>li:before{content:"\0025cb  "}ul.lst-kix_c8i4jrv36f65-0{list-style-type:none}.lst-kix_47wnqvlrxwjs-6>li:before{content:"\0025cf  "}.lst-kix_vudwmvba9uuz-1>li:before{content:"\0025cb  "}.lst-kix_g6yj3lsmcciz-6>li:before{content:"\0025cf  "}ul.lst-kix_c8i4jrv36f65-8{list-style-type:none}ul.lst-kix_vudwmvba9uuz-6{list-style-type:none}ul.lst-kix_c8i4jrv36f65-7{list-style-type:none}ul.lst-kix_vudwmvba9uuz-7{list-style-type:none}ul.lst-kix_c8i4jrv36f65-6{list-style-type:none}ul.lst-kix_vudwmvba9uuz-8{list-style-type:none}ul.lst-kix_c8i4jrv36f65-5{list-style-type:none}.lst-kix_vudwmvba9uuz-0>li:before{content:"\0025cf  "}.lst-kix_g6yj3lsmcciz-7>li:before{content:"\0025cb  "}ul.lst-kix_vudwmvba9uuz-2{list-style-type:none}ul.lst-kix_vudwmvba9uuz-3{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-8{list-style-type:none}ul.lst-kix_vudwmvba9uuz-4{list-style-type:none}.lst-kix_g6yj3lsmcciz-4>li:before{content:"\0025cb  "}ul.lst-kix_vudwmvba9uuz-5{list-style-type:none}.lst-kix_g6yj3lsmcciz-1>li:before{content:"\0025cb  "}ul.lst-kix_vudwmvba9uuz-0{list-style-type:none}ul.lst-kix_vudwmvba9uuz-1{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-1{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-0{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-3{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-2{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-5{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-4{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-7{list-style-type:none}ul.lst-kix_uf0vm9ltz4d0-6{list-style-type:none}ul.lst-kix_ynjmycy189zt-4{list-style-type:none}ul.lst-kix_ynjmycy189zt-5{list-style-type:none}ul.lst-kix_ynjmycy189zt-6{list-style-type:none}ul.lst-kix_ynjmycy189zt-7{list-style-type:none}ul.lst-kix_ynjmycy189zt-8{list-style-type:none}.lst-kix_g0xj42mhf4l9-2>li:before{content:"\0025a0  "}.lst-kix_x0h22t9m68z6-2>li:before{content:"\0025a0  "}ul.lst-kix_rwpeiwyra0dr-7{list-style-type:none}ul.lst-kix_rwpeiwyra0dr-8{list-style-type:none}.lst-kix_g0xj42mhf4l9-5>li:before{content:"\0025a0  "}ul.lst-kix_rwpeiwyra0dr-3{list-style-type:none}ul.lst-kix_ynjmycy189zt-0{list-style-type:none}ul.lst-kix_rwpeiwyra0dr-4{list-style-type:none}ul.lst-kix_ynjmycy189zt-1{list-style-type:none}ul.lst-kix_rwpeiwyra0dr-5{list-style-type:none}.lst-kix_yc033gjmfhsr-8>li:before{content:"\0025a0  "}ul.lst-kix_ynjmycy189zt-2{list-style-type:none}.lst-kix_g0xj42mhf4l9-4>li:before{content:"\0025cb  "}ul.lst-kix_rwpeiwyra0dr-6{list-style-type:none}ul.lst-kix_ynjmycy189zt-3{list-style-type:none}.lst-kix_g0xj42mhf4l9-7>li:before{content:"\0025cb  "}.lst-kix_x0h22t9m68z6-5>li:before{content:"\0025a0  "}.lst-kix_x0h22t9m68z6-7>li:before{content:"\0025cb  "}.lst-kix_mfpbw01he5fz-5>li:before{content:"\0025a0  "}.lst-kix_mfpbw01he5fz-0>li:before{content:"\0025cf  "}.lst-kix_mfpbw01he5fz-8>li:before{content:"\0025a0  "}.lst-kix_x0h22t9m68z6-4>li:before{content:"\0025cb  "}.lst-kix_irvgnf3nji8s-7>li:before{content:"\0025cb  "}.lst-kix_mfpbw01he5fz-2>li:before{content:"\0025a0  "}.lst-kix_mfpbw01he5fz-3>li:before{content:"\0025cf  "}.lst-kix_52diw2o8e39w-1>li:before{content:"\0025cb  "}.lst-kix_52diw2o8e39w-2>li:before{content:"\0025a0  "}.lst-kix_irvgnf3nji8s-5>li:before{content:"\0025a0  "}.lst-kix_irvgnf3nji8s-4>li:before{content:"\0025cb  "}.lst-kix_fnh5ojejzhgd-6>li:before{content:"\0025cf  "}.lst-kix_fnh5ojejzhgd-8>li:before{content:"\0025a0  "}ul.lst-kix_spr6x5pb1u0q-2{list-style-type:none}ul.lst-kix_spr6x5pb1u0q-3{list-style-type:none}ul.lst-kix_spr6x5pb1u0q-0{list-style-type:none}ul.lst-kix_spr6x5pb1u0q-1{list-style-type:none}.lst-kix_nbzs3aql55ir-1>li:before{content:"\0025cb  "}ul.lst-kix_spr6x5pb1u0q-6{list-style-type:none}ul.lst-kix_spr6x5pb1u0q-7{list-style-type:none}.lst-kix_x1oy6u58zf2q-8>li:before{content:"\0025a0  "}ul.lst-kix_spr6x5pb1u0q-4{list-style-type:none}ul.lst-kix_spr6x5pb1u0q-5{list-style-type:none}ul.lst-kix_spr6x5pb1u0q-8{list-style-type:none}.lst-kix_nbzs3aql55ir-3>li:before{content:"\0025cf  "}.lst-kix_376ipe9z4ys9-0>li:before{content:"\0025cf  "}.lst-kix_fnh5ojejzhgd-0>li:before{content:"\0025cf  "}.lst-kix_47wnqvlrxwjs-1>li:before{content:"\0025cb  "}.lst-kix_8deurvnuojkb-4>li:before{content:"\0025cb  "}.lst-kix_fnh5ojejzhgd-1>li:before{content:"\0025cb  "}.lst-kix_8deurvnuojkb-3>li:before{content:"\0025cf  "}ul.lst-kix_nbzs3aql55ir-7{list-style-type:none}.lst-kix_fnh5ojejzhgd-3>li:before{content:"\0025cf  "}ul.lst-kix_nbzs3aql55ir-6{list-style-type:none}ul.lst-kix_nbzs3aql55ir-8{list-style-type:none}ul.lst-kix_nbzs3aql55ir-3{list-style-type:none}ul.lst-kix_nbzs3aql55ir-2{list-style-type:none}ul.lst-kix_nbzs3aql55ir-5{list-style-type:none}.lst-kix_8deurvnuojkb-1>li:before{content:"\0025cb  "}ul.lst-kix_nbzs3aql55ir-4{list-style-type:none}.lst-kix_376ipe9z4ys9-8>li:before{content:"\0025a0  "}ul.lst-kix_nbzs3aql55ir-1{list-style-type:none}ul.lst-kix_nbzs3aql55ir-0{list-style-type:none}.lst-kix_376ipe9z4ys9-6>li:before{content:"\0025cf  "}.lst-kix_ynjmycy189zt-6>li:before{content:"\0025cf  "}.lst-kix_x1oy6u58zf2q-0>li:before{content:"\0025cf  "}.lst-kix_8deurvnuojkb-6>li:before{content:"\0025cf  "}.lst-kix_77y3plo9k29i-5>li:before{content:"\0025a0  "}.lst-kix_espyab61p86-2>li:before{content:"\0025a0  "}.lst-kix_mc4pz2k2cid5-7>li:before{content:"\0025cb  "}.lst-kix_nbzs3aql55ir-6>li:before{content:"\0025cf  "}.lst-kix_nbzs3aql55ir-4>li:before{content:"\0025cb  "}.lst-kix_mc4pz2k2cid5-5>li:before{content:"\0025a0  "}.lst-kix_p2igigmh7ri-5>li:before{content:"\0025a0  "}.lst-kix_lpf5h46eyihc-8>li:before{content:"\0025a0  "}.lst-kix_ynjmycy189zt-8>li:before{content:"\0025a0  "}.lst-kix_espyab61p86-4>li:before{content:"\0025cb  "}.lst-kix_pfsmhm470wlg-8>li:before{content:"\0025a0  "}.lst-kix_x1oy6u58zf2q-6>li:before{content:"\0025cf  "}.lst-kix_p2igigmh7ri-7>li:before{content:"\0025cb  "}ul.lst-kix_z1654lrb42kb-7{list-style-type:none}.lst-kix_oeltg7yado54-4>li:before{content:"\0025cb  "}ul.lst-kix_z1654lrb42kb-6{list-style-type:none}.lst-kix_gnntovy9v4k5-5>li:before{content:"\0025a0  "}ul.lst-kix_z1654lrb42kb-8{list-style-type:none}.lst-kix_uf0vm9ltz4d0-5>li:before{content:"\0025a0  "}.lst-kix_uf0vm9ltz4d0-7>li:before{content:"\0025cb  "}.lst-kix_52diw2o8e39w-4>li:before{content:"\0025cb  "}.lst-kix_4xof1r20di8m-7>li:before{content:"\0025cb  "}.lst-kix_95omunf7ar-7>li:before{content:"\0025cb  "}.lst-kix_irvgnf3nji8s-2>li:before{content:"\0025a0  "}ul.lst-kix_z1654lrb42kb-1{list-style-type:none}.lst-kix_gnntovy9v4k5-7>li:before{content:"\0025cb  "}ul.lst-kix_z1654lrb42kb-0{list-style-type:none}ul.lst-kix_z1654lrb42kb-3{list-style-type:none}.lst-kix_oeltg7yado54-6>li:before{content:"\0025cf  "}ul.lst-kix_z1654lrb42kb-2{list-style-type:none}.lst-kix_4xof1r20di8m-5>li:before{content:"\0025a0  "}.lst-kix_95omunf7ar-5>li:before{content:"\0025a0  "}ul.lst-kix_z1654lrb42kb-5{list-style-type:none}ul.lst-kix_z1654lrb42kb-4{list-style-type:none}.lst-kix_vlfbbop29bmy-1>li:before{content:"\0025cb  "}.lst-kix_vlfbbop29bmy-3>li:before{content:"\0025cf  "}.lst-kix_bxnghnm226jg-7>li:before{content:"\0025cb  "}.lst-kix_ynjmycy189zt-0>li:before{content:"\0025cf  "}.lst-kix_fl0ihf9kdb4o-8>li:before{content:"\0025a0  "}ul.lst-kix_s97cqb78zmi7-0{list-style-type:none}ul.lst-kix_s97cqb78zmi7-1{list-style-type:none}ul.lst-kix_s97cqb78zmi7-2{list-style-type:none}ul.lst-kix_s97cqb78zmi7-3{list-style-type:none}.lst-kix_7u2eln2ijak9-0>li:before{content:"\0025cf  "}.lst-kix_yc033gjmfhsr-6>li:before{content:"\0025cf  "}ul.lst-kix_s97cqb78zmi7-8{list-style-type:none}.lst-kix_7u2eln2ijak9-6>li:before{content:"\0025cf  "}ul.lst-kix_s97cqb78zmi7-4{list-style-type:none}ul.lst-kix_s97cqb78zmi7-5{list-style-type:none}.lst-kix_kj5ipvbniit8-4>li:before{content:"\0025cb  "}ul.lst-kix_s97cqb78zmi7-6{list-style-type:none}ul.lst-kix_s97cqb78zmi7-7{list-style-type:none}.lst-kix_kj5ipvbniit8-2>li:before{content:"\0025a0  "}.lst-kix_pq1l6rjw9q5s-0>li:before{content:"\0025cf  "}.lst-kix_7u2eln2ijak9-8>li:before{content:"\0025a0  "}.lst-kix_yc033gjmfhsr-0>li:before{content:"\0025cf  "}.lst-kix_tjqtpvyutk54-1>li:before{content:"\0025cb  "}.lst-kix_whbvygousy3v-3>li:before{content:"\0025cf  "}.lst-kix_pq1l6rjw9q5s-2>li:before{content:"\0025a0  "}.lst-kix_pq1l6rjw9q5s-8>li:before{content:"\0025a0  "}.lst-kix_5lc6nbg1p01p-6>li:before{content:"\0025cf  "}.lst-kix_v5n0rrdj5hvj-5>li:before{content:"\0025a0  "}.lst-kix_67l8yl45oi1f-4>li:before{content:"\0025cb  "}.lst-kix_77y3plo9k29i-3>li:before{content:"\0025cf  "}.lst-kix_5lc6nbg1p01p-4>li:before{content:"\0025cb  "}.lst-kix_v5n0rrdj5hvj-7>li:before{content:"\0025cb  "}.lst-kix_67l8yl45oi1f-6>li:before{content:"\0025cf  "}.lst-kix_whbvygousy3v-1>li:before{content:"\0025cb  "}ul.lst-kix_gnntovy9v4k5-6{list-style-type:none}.lst-kix_tjqtpvyutk54-7>li:before{content:"\0025cb  "}ul.lst-kix_gnntovy9v4k5-5{list-style-type:none}ul.lst-kix_gnntovy9v4k5-8{list-style-type:none}ul.lst-kix_gnntovy9v4k5-7{list-style-type:none}.lst-kix_c8i4jrv36f65-3>li:before{content:"\0025cf  "}.lst-kix_75yzxb4d5d2u-7>li:before{content:"\0025cb  "}ul.lst-kix_a603rvteeny0-0{list-style-type:none}.lst-kix_f2a6455hkc64-0>li:before{content:"\0025cf  "}ul.lst-kix_a603rvteeny0-1{list-style-type:none}ul.lst-kix_a603rvteeny0-2{list-style-type:none}.lst-kix_6xdszrkra98x-3>li:before{content:"\0025cf  "}ul.lst-kix_a603rvteeny0-3{list-style-type:none}.lst-kix_75yzxb4d5d2u-4>li:before{content:"\0025cb  "}.lst-kix_z1654lrb42kb-0>li:before{content:"\0025cf  "}.lst-kix_7ud9h2t659dd-0>li:before{content:"-  "}.lst-kix_o5qywvp9xm4o-7>li:before{content:"\0025cb  "}.lst-kix_spr6x5pb1u0q-8>li:before{content:"\0025a0  "}.lst-kix_f2a6455hkc64-5>li:before{content:"\0025a0  "}.lst-kix_lj1zkd3bpkgx-4>li:before{content:"\0025cb  "}.lst-kix_f2a6455hkc64-8>li:before{content:"\0025a0  "}.lst-kix_1dcmsdrcn8h-5>li:before{content:"\0025a0  "}.lst-kix_z1654lrb42kb-3>li:before{content:"\0025cf  "}ul.lst-kix_a603rvteeny0-4{list-style-type:none}ul.lst-kix_a603rvteeny0-5{list-style-type:none}.lst-kix_c8i4jrv36f65-8>li:before{content:"\0025a0  "}.lst-kix_1dcmsdrcn8h-2>li:before{content:"\0025a0  "}ul.lst-kix_a603rvteeny0-6{list-style-type:none}.lst-kix_o5qywvp9xm4o-2>li:before{content:"\0025a0  "}ul.lst-kix_a603rvteeny0-7{list-style-type:none}.lst-kix_cb33oapgqo2g-1>li:before{content:"\0025cb  "}.lst-kix_lj1zkd3bpkgx-7>li:before{content:"\0025cb  "}ul.lst-kix_a603rvteeny0-8{list-style-type:none}.lst-kix_7ud9h2t659dd-8>li:before{content:"-  "}.lst-kix_ez4b0ilstusb-6>li:before{content:"\0025cf  "}.lst-kix_spr6x5pb1u0q-0>li:before{content:"\0025cf  "}.lst-kix_2kif4r65nu02-0>li:before{content:"\0025cf  "}.lst-kix_cb33oapgqo2g-6>li:before{content:"\0025cf  "}.lst-kix_6xdszrkra98x-6>li:before{content:"\0025cf  "}.lst-kix_spr6x5pb1u0q-3>li:before{content:"\0025cf  "}ul.lst-kix_pfsmhm470wlg-8{list-style-type:none}ul.lst-kix_pfsmhm470wlg-7{list-style-type:none}.lst-kix_7ud9h2t659dd-5>li:before{content:"-  "}.lst-kix_5fhkllpes9k2-4>li:before{content:"\0025cb  "}.lst-kix_vy14fvvk8xlp-8>li:before{content:"\0025a0  "}.lst-kix_fl0ihf9kdb4o-5>li:before{content:"\0025a0  "}.lst-kix_fl0ihf9kdb4o-2>li:before{content:"\0025a0  "}.lst-kix_bxnghnm226jg-4>li:before{content:"\0025cb  "}ul.lst-kix_cb33oapgqo2g-7{list-style-type:none}ul.lst-kix_cb33oapgqo2g-6{list-style-type:none}.lst-kix_vy14fvvk8xlp-0>li:before{content:"\0025cf  "}ul.lst-kix_cb33oapgqo2g-8{list-style-type:none}.lst-kix_ez4b0ilstusb-1>li:before{content:"\0025cb  "}.lst-kix_bxnghnm226jg-1>li:before{content:"\0025cb  "}.lst-kix_5fhkllpes9k2-7>li:before{content:"\0025cb  "}.lst-kix_lpf5h46eyihc-5>li:before{content:"\0025a0  "}.lst-kix_vy14fvvk8xlp-3>li:before{content:"\0025cf  "}.lst-kix_pfsmhm470wlg-2>li:before{content:"\0025a0  "}.lst-kix_c8i4jrv36f65-0>li:before{content:"\0025cf  "}.lst-kix_lpf5h46eyihc-2>li:before{content:"\0025a0  "}.lst-kix_77y3plo9k29i-8>li:before{content:"\0025a0  "}.lst-kix_p2igigmh7ri-2>li:before{content:"\0025a0  "}.lst-kix_376ipe9z4ys9-3>li:before{content:"\0025cf  "}.lst-kix_835rqaclo36m-2>li:before{content:"\0025a0  "}.lst-kix_pfsmhm470wlg-5>li:before{content:"\0025a0  "}.lst-kix_ynjmycy189zt-3>li:before{content:"\0025cf  "}.lst-kix_vlfbbop29bmy-6>li:before{content:"\0025cf  "}ul.lst-kix_b6gyq8ilc0v0-1{list-style-type:none}.lst-kix_x1oy6u58zf2q-3>li:before{content:"\0025cf  "}ul.lst-kix_b6gyq8ilc0v0-0{list-style-type:none}.lst-kix_espyab61p86-7>li:before{content:"\0025cb  "}.lst-kix_mc4pz2k2cid5-2>li:before{content:"\0025a0  "}ul.lst-kix_b6gyq8ilc0v0-8{list-style-type:none}ul.lst-kix_b6gyq8ilc0v0-7{list-style-type:none}ul.lst-kix_b6gyq8ilc0v0-6{list-style-type:none}ul.lst-kix_x87irn1u7y09-1{list-style-type:none}ul.lst-kix_b6gyq8ilc0v0-5{list-style-type:none}.lst-kix_95omunf7ar-2>li:before{content:"\0025a0  "}ul.lst-kix_x87irn1u7y09-0{list-style-type:none}ul.lst-kix_b6gyq8ilc0v0-4{list-style-type:none}ul.lst-kix_x87irn1u7y09-3{list-style-type:none}ul.lst-kix_fnh5ojejzhgd-0{list-style-type:none}ul.lst-kix_b6gyq8ilc0v0-3{list-style-type:none}ul.lst-kix_x87irn1u7y09-2{list-style-type:none}.lst-kix_uf0vm9ltz4d0-2>li:before{content:"\0025a0  "}ul.lst-kix_b6gyq8ilc0v0-2{list-style-type:none}ul.lst-kix_phulklnep3we-5{list-style-type:none}ul.lst-kix_hffh46jr22us-0{list-style-type:none}ul.lst-kix_phulklnep3we-6{list-style-type:none}ul.lst-kix_phulklnep3we-7{list-style-type:none}.lst-kix_u5ox7nmfuwqp-4>li:before{content:"\0025cb  "}ul.lst-kix_phulklnep3we-8{list-style-type:none}ul.lst-kix_phulklnep3we-1{list-style-type:none}.lst-kix_52diw2o8e39w-7>li:before{content:"\0025cb  "}ul.lst-kix_phulklnep3we-2{list-style-type:none}ul.lst-kix_phulklnep3we-3{list-style-type:none}.lst-kix_gnntovy9v4k5-2>li:before{content:"\0025a0  "}ul.lst-kix_phulklnep3we-4{list-style-type:none}ul.lst-kix_hffh46jr22us-7{list-style-type:none}ul.lst-kix_hffh46jr22us-8{list-style-type:none}ul.lst-kix_hffh46jr22us-5{list-style-type:none}ul.lst-kix_hffh46jr22us-6{list-style-type:none}ul.lst-kix_phulklnep3we-0{list-style-type:none}ul.lst-kix_hffh46jr22us-3{list-style-type:none}ul.lst-kix_hffh46jr22us-4{list-style-type:none}.lst-kix_djvau7gj2w8b-5>li:before{content:"\0025a0  "}ul.lst-kix_hffh46jr22us-1{list-style-type:none}ul.lst-kix_hffh46jr22us-2{list-style-type:none}.lst-kix_x87irn1u7y09-7>li:before{content:"\0025cb  "}.lst-kix_7dvop4c8s0d-6>li:before{content:"\0025cf  "}.lst-kix_oeltg7yado54-1>li:before{content:"\0025cb  "}ul.lst-kix_pfsmhm470wlg-6{list-style-type:none}.lst-kix_c2ezjrtxwn6r-2>li:before{content:"\0025a0  "}ul.lst-kix_pfsmhm470wlg-5{list-style-type:none}.lst-kix_7u2eln2ijak9-3>li:before{content:"\0025cf  "}ul.lst-kix_pfsmhm470wlg-4{list-style-type:none}ul.lst-kix_pfsmhm470wlg-3{list-style-type:none}.lst-kix_yqf5qsmroeu7-8>li:before{content:"\0025a0  "}ul.lst-kix_pfsmhm470wlg-2{list-style-type:none}.lst-kix_b6gyq8ilc0v0-7>li:before{content:"\0025cb  "}ul.lst-kix_pfsmhm470wlg-1{list-style-type:none}ul.lst-kix_pfsmhm470wlg-0{list-style-type:none}ul.lst-kix_7dvop4c8s0d-2{list-style-type:none}.lst-kix_2kif4r65nu02-3>li:before{content:"\0025cf  "}ul.lst-kix_7dvop4c8s0d-1{list-style-type:none}ul.lst-kix_7dvop4c8s0d-4{list-style-type:none}ul.lst-kix_7dvop4c8s0d-3{list-style-type:none}.lst-kix_yc033gjmfhsr-3>li:before{content:"\0025cf  "}ul.lst-kix_7dvop4c8s0d-6{list-style-type:none}ul.lst-kix_7dvop4c8s0d-5{list-style-type:none}ul.lst-kix_7dvop4c8s0d-8{list-style-type:none}.lst-kix_xushg9nfvd-2>li:before{content:"\0025a0  "}ul.lst-kix_7dvop4c8s0d-7{list-style-type:none}.lst-kix_9lv5ekihldmd-4>li:before{content:"\0025cb  "}.lst-kix_yqf5qsmroeu7-0>li:before{content:"\0025cf  "}.lst-kix_emz4qwnpv0z7-8>li:before{content:"\0025a0  "}ul.lst-kix_7dvop4c8s0d-0{list-style-type:none}.lst-kix_4xof1r20di8m-2>li:before{content:"\0025a0  "}.lst-kix_oyq83w39gfpd-7>li:before{content:"\0025cb  "}ul.lst-kix_oyq83w39gfpd-2{list-style-type:none}ul.lst-kix_x87irn1u7y09-5{list-style-type:none}ul.lst-kix_fnh5ojejzhgd-2{list-style-type:none}.lst-kix_67l8yl45oi1f-1>li:before{content:"\0025cb  "}ul.lst-kix_oyq83w39gfpd-1{list-style-type:none}ul.lst-kix_x87irn1u7y09-4{list-style-type:none}.lst-kix_rkobndvsr1ef-3>li:before{content:"\0025cf  "}ul.lst-kix_fnh5ojejzhgd-1{list-style-type:none}.lst-kix_whbvygousy3v-6>li:before{content:"\0025cf  "}.lst-kix_v5n0rrdj5hvj-2>li:before{content:"\0025a0  "}ul.lst-kix_oyq83w39gfpd-0{list-style-type:none}ul.lst-kix_x87irn1u7y09-7{list-style-type:none}ul.lst-kix_fnh5ojejzhgd-4{list-style-type:none}.lst-kix_emz4qwnpv0z7-0>li:before{content:"\0025cf  "}ul.lst-kix_x87irn1u7y09-6{list-style-type:none}ul.lst-kix_fnh5ojejzhgd-3{list-style-type:none}ul.lst-kix_fnh5ojejzhgd-6{list-style-type:none}ul.lst-kix_x87irn1u7y09-8{list-style-type:none}ul.lst-kix_fnh5ojejzhgd-5{list-style-type:none}ul.lst-kix_fnh5ojejzhgd-8{list-style-type:none}ul.lst-kix_fnh5ojejzhgd-7{list-style-type:none}.lst-kix_a603rvteeny0-1>li:before{content:"\0025cb  "}.lst-kix_s97cqb78zmi7-2>li:before{content:"\0025a0  "}.lst-kix_tjqtpvyutk54-4>li:before{content:"\0025cb  "}.lst-kix_y8664apqgwm5-1>li:before{content:"\0025cb  "}.lst-kix_z8fnyoihpe2u-5>li:before{content:"\0025a0  "}.lst-kix_77y3plo9k29i-0>li:before{content:"\0025cf  "}.lst-kix_vudwmvba9uuz-6>li:before{content:"\0025cf  "}.lst-kix_kj5ipvbniit8-7>li:before{content:"\0025cb  "}ul.lst-kix_oyq83w39gfpd-8{list-style-type:none}ul.lst-kix_oyq83w39gfpd-7{list-style-type:none}ul.lst-kix_oyq83w39gfpd-6{list-style-type:none}.lst-kix_5lc6nbg1p01p-1>li:before{content:"\0025cb  "}ul.lst-kix_oyq83w39gfpd-5{list-style-type:none}.lst-kix_pq1l6rjw9q5s-5>li:before{content:"\0025a0  "}ul.lst-kix_oyq83w39gfpd-4{list-style-type:none}ul.lst-kix_oyq83w39gfpd-3{list-style-type:none}ol{margin:0;padding:0}table td,table th{padding:0}.c16{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#f3f3f3;border-left-style:solid;border-bottom-width:1pt;width:63pt;border-top-color:#000000;border-bottom-style:solid}.c44{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#f3f3f3;border-left-style:solid;border-bottom-width:1pt;width:468pt;border-top-color:#000000;border-bottom-style:solid}.c26{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#b6d7a8;border-left-style:solid;border-bottom-width:1pt;width:63pt;border-top-color:#000000;border-bottom-style:solid}.c12{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;background-color:#999999;border-left-style:solid;border-bottom-width:1pt;width:63pt;border-top-color:#000000;border-bottom-style:solid}.c24{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:324.8pt;border-top-color:#000000;border-bottom-style:solid}.c30{border-right-style:solid;padding:5pt 5pt 5pt 5pt;border-bottom-color:#000000;border-top-width:1pt;border-right-width:1pt;border-left-color:#000000;vertical-align:top;border-right-color:#000000;border-left-width:1pt;border-top-style:solid;border-left-style:solid;border-bottom-width:1pt;width:79.5pt;border-top-color:#000000;border-bottom-style:solid}.c14{-webkit-text-decoration-skip:none;color:#000000;font-weight:400;text-decoration:underline;vertical-align:baseline;text-decoration-skip-ink:none;font-size:15pt;font-family:"Arial";font-style:normal}.c0{margin-left:36pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c2{padding-top:16pt;padding-bottom:4pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c6{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c31{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:20pt;font-family:"Arial";font-style:normal}.c7{color:#000000;font-weight:700;text-decoration:none;vertical-align:baseline;font-size:9pt;font-family:"Arial";font-style:normal}.c1{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c29{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c22{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Arial";font-style:normal}.c3{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left;height:11pt}.c46{padding-top:0pt;padding-bottom:3pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c34{margin-left:18pt;padding-top:3pt;padding-bottom:0pt;line-height:1.0;orphans:2;widows:2;text-align:left}.c38{padding-top:20pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c15{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Arial";font-style:italic}.c47{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-family:"Arial";font-style:normal}.c27{color:#1155cc;text-decoration:none;vertical-align:baseline;font-size:20pt;font-family:"Arial";font-style:normal}.c42{padding-top:10pt;padding-bottom:0pt;line-height:1.0;orphans:2;widows:2;text-align:left}.c43{padding-top:10pt;padding-bottom:4pt;line-height:1.0;orphans:2;widows:2;text-align:left}.c18{color:#434343;font-weight:400;text-decoration:none;vertical-align:baseline;font-family:"Arial";font-style:normal}.c9{margin-left:36pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c40{color:#000000;text-decoration:none;vertical-align:baseline;font-size:26pt;font-family:"Arial";font-style:normal}.c11{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c32{padding-top:4pt;padding-bottom:0pt;line-height:1.0;orphans:2;widows:2;text-align:left}.c35{padding-top:18pt;padding-bottom:6pt;line-height:1.0;page-break-after:avoid;text-align:left}.c4{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;color:#1155cc;text-decoration:underline}.c25{border-spacing:0;border-collapse:collapse;margin-right:auto}.c20{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:left}.c48{text-decoration-skip-ink:none;font-size:15pt;-webkit-text-decoration-skip:none;text-decoration:underline}.c17{padding-top:0pt;padding-bottom:0pt;line-height:1.0;text-align:center}.c19{padding:0;margin:0}.c21{margin-left:72pt;padding-left:0pt}.c41{max-width:468pt;padding:72pt 72pt 72pt 72pt}.c8{color:inherit;text-decoration:inherit}.c10{font-size:14pt}.c28{background-color:#999999}.c45{font-style:italic}.c39{font-size:9pt}.c36{background-color:#b6d7a8}.c23{background-color:#ffffff}.c33{height:11pt}.c13{font-weight:700}.c5{height:0pt}.c37{margin-left:36pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style><div class="c23 c41"><p class="c46 title" id="h.odc700in1ypg"><span class="c13 c40">WebPerf WG @ TPAC 2021</span></p><p class="c11"><span class="c4 c10"><a class="c8" href="https://www.google.com/url?q=https://bit.ly/webperf-tpac21&amp;sa=D&amp;source=editors&amp;ust=1637836983312000&amp;usg=AOvVaw2g2d7PhXaGB0sJ4f7InvMH">bit.ly/webperf-tpac21</a></span></p><p class="c11"><span class="c48">&nbsp;</span></p><p class="c3"><span class="c1"></span></p><a id="t.a4d217188b2272cacee06964bfd17e9ebfd3d6e8"></a><a id="t.0"></a><table class="c25"><tbody><tr class="c5"><td class="c44" colspan="1" rowspan="1"><p class="c20 c33"><span class="c1"></span></p><p class="c32"><span class="c13"><a class="c8" href="#h.wlg3h8rzf61l">Logistics</a></span><span class="c13">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="c13"><a class="c8" href="#h.wlg3h8rzf61l">1</a></span></p><p class="c34"><span><a class="c8" href="#h.dblx6emzzv04">Location &amp; participation</a></span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span><a class="c8" href="#h.dblx6emzzv04">1</a></span></p><p class="c34"><span><a class="c8" href="#h.x2o0mg51zqnv">Attendees</a></span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span><a class="c8" href="#h.x2o0mg51zqnv">1</a></span></p><p class="c42"><span class="c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/document/d/1-xMvUHAjqhQdegNqupxlqsLbfPHWq5MJ0iySg9Z1KBs/edit%23heading%3Dh.lnthn2y6jgo8&amp;sa=D&amp;source=editors&amp;ust=1637836983314000&amp;usg=AOvVaw2UmCuJ-jYESP4oW6neXPuS">Agenda scratchpad</a></span><span class="c13">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/document/d/1-xMvUHAjqhQdegNqupxlqsLbfPHWq5MJ0iySg9Z1KBs/edit%23heading%3Dh.lnthn2y6jgo8&amp;sa=D&amp;source=editors&amp;ust=1637836983315000&amp;usg=AOvVaw3lRMoSrm2dg62qxglzciOd">1</a></span></p><p class="c42"><span class="c13"><a class="c8" href="#h.tx59951gswac">Agenda</a></span><span class="c13">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="c13"><a class="c8" href="#h.tx59951gswac">2</a></span></p><p class="c34"><span><a class="c8" href="#h.k0zzrh9ez9fv">Monday</a></span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span><a class="c8" href="#h.k0zzrh9ez9fv">2</a></span></p><p class="c34"><span><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/document/d/1inejuvPONXPOLKTCcUzOBhPh6QOckMcltnR-E3xyZVQ/edit%23heading%3Dh.e2nehhjf0s82&amp;sa=D&amp;source=editors&amp;ust=1637836983316000&amp;usg=AOvVaw1Z7mUn4rId2673PNUHK9ew">Tuesday</a></span><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/document/d/1inejuvPONXPOLKTCcUzOBhPh6QOckMcltnR-E3xyZVQ/edit%23heading%3Dh.e2nehhjf0s82&amp;sa=D&amp;source=editors&amp;ust=1637836983317000&amp;usg=AOvVaw2mz1THhrvPeKxADK3EDkCQ">2</a></span></p><p class="c43"><span class="c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/document/d/1-xMvUHAjqhQdegNqupxlqsLbfPHWq5MJ0iySg9Z1KBs/edit%23heading%3Dh.ym9i2k8eaxr5&amp;sa=D&amp;source=editors&amp;ust=1637836983318000&amp;usg=AOvVaw21ltvj74-7iQ95MS8qyj9s">Minutes</a></span><span class="c13">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/document/d/1-xMvUHAjqhQdegNqupxlqsLbfPHWq5MJ0iySg9Z1KBs/edit%23heading%3Dh.ym9i2k8eaxr5&amp;sa=D&amp;source=editors&amp;ust=1637836983319000&amp;usg=AOvVaw38qRDJv-q6wc1HTUmZHSLj">2</a></span></p><p class="c20 c33"><span class="c1"></span></p></td></tr></tbody></table><p class="c3"><span class="c1"></span></p><h1 class="c38" id="h.wlg3h8rzf61l"><span class="c13 c27">Logistics</span></h1><h2 class="c29" id="h.dblx6emzzv04"><span class="c22">When</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://www.w3.org/wiki/TPAC/2021/GroupMeetings&amp;sa=D&amp;source=editors&amp;ust=1637836983321000&amp;usg=AOvVaw0kuXUIR6uZ8F7Ny_YJbAOd">October 25-29 2020</a></span><span class="c1">&nbsp;- 8am-11am PST</span></p><h2 class="c29" id="h.oxpoxe8f63ye"><span class="c22">Registering</span></h2><ul class="c19 lst-kix_4xof1r20di8m-0 start"><li class="c0 li-bullet-0"><span>Register! </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://www.w3.org/2021/10/TPAC/Overview.html&amp;sa=D&amp;source=editors&amp;ust=1637836983323000&amp;usg=AOvVaw1HOuSLDOVZW0Jr5Z2Op0Un">https://www.w3.org/2021/10/TPAC/Overview.html</a></span></li><li class="c0 li-bullet-0"><span class="c1">Free for WG Members and Invited Experts</span></li><li class="c0 li-bullet-0"><span class="c1">If you’re not one and want to join, ping the chairs to discuss (Yoav Weiss, Nic Jansma)</span></li></ul><h2 class="c29" id="h.lixi2ea9f0ds"><span class="c22">Calling in</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://meet.google.com/ayk-ipmq-kjv&amp;sa=D&amp;source=editors&amp;ust=1637836983324000&amp;usg=AOvVaw1GYyMKaj77iOQLPp90viE6">Video call link</a></span></p><h2 class="c29" id="h.7zqyiytzoxel"><span class="c22">Attendees</span></h2><ul class="c19 lst-kix_lpf5h46eyihc-0 start"><li class="c0 li-bullet-0"><span class="c1">Yoav Weiss (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Nic Jansma (Akamai)</span></li><li class="c0 li-bullet-0"><span class="c1">Lucas Pardue (Cloudflare)</span></li><li class="c0 li-bullet-0"><span class="c1">Subrata Ashe (Salesforce)</span></li><li class="c0 li-bullet-0"><span class="c1">Nicolás Peña Moreno (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Michal Mocny (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Patrick Meenan (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Andrew Comminos (Facebook)</span></li><li class="c0 li-bullet-0"><span class="c1">Ilya Grigorik (Shopify)</span></li><li class="c0 li-bullet-0"><span class="c1">Boris Schapira (Contentsquare)</span></li><li class="c0 li-bullet-0"><span class="c1">Noam Helfman (Microsoft)</span></li><li class="c0 li-bullet-0"><span class="c1">Giacomo Zecchini</span></li><li class="c0 li-bullet-0"><span class="c1">Ian Clelland (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Addy Osmani (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Noam Rosenthal</span></li><li class="c0 li-bullet-0"><span class="c1">Steven Bougon (Salesforce)</span></li><li class="c0 li-bullet-0"><span class="c1">Wooseok Jeong(Facebook)</span></li><li class="c0 li-bullet-0"><span class="c1">Caio Gondim (The New York Times)</span></li><li class="c0 li-bullet-0"><span class="c1">Tim Dresser (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Scott Gifford (Amazon)</span></li><li class="c0 li-bullet-0"><span class="c1">Colin Bendell (Shopify)</span></li><li class="c0 li-bullet-0"><span class="c1">Sérgio Gomes (Automattic)</span></li><li class="c0 li-bullet-0"><span class="c1">Howard Edwards (Bocoup)</span></li><li class="c0 li-bullet-0"><span class="c1">Courtney Holland (Bocoup)</span></li><li class="c0 li-bullet-0"><span>Simon Pieters </span><span>(Bocoup)</span></li><li class="c0 li-bullet-0"><span class="c1">Carine Bournez (W3C)</span></li><li class="c0 li-bullet-0"><span class="c1">Scott Haseley (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Paul Calvano (Akamai)</span></li><li class="c0 li-bullet-0"><span class="c1">Andy Davies (SpeedCurve)</span></li><li class="c0 li-bullet-0"><span class="c1">Katie Sylor-Miller (Etsy)</span></li><li class="c0 li-bullet-0"><span class="c1">Andrew Galloni (Cloudflare)</span></li><li class="c0 li-bullet-0"><span class="c1">Tim Kadlec (WebPageTest)</span></li><li class="c0 li-bullet-0"><span class="c1">Cliff Crocker (SpeedCurve)</span></li><li class="c0 li-bullet-0"><span class="c1">Annie Sullivan (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Alex Christensen (Apple)</span></li><li class="c0 li-bullet-0"><span class="c1">Nitin Pasumarthy (LinkedIn)</span></li><li class="c0 li-bullet-0"><span class="c1">Prasanna Vijayanathan (Netflix)</span></li><li class="c0 li-bullet-0"><span class="c1">Thomas Steiner (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Sean Feng (Mozilla)</span></li><li class="c0 li-bullet-0"><span class="c1">Vaspol Ruamviboonsuk (Akamai)</span></li><li class="c0 li-bullet-0"><span class="c1">Benjamin De Kosnik (Mozilla)</span></li><li class="c0 li-bullet-0"><span class="c1">Leonardo Balter (Salesforce)</span></li><li class="c0 li-bullet-0"><span class="c1">Philip Walton (Google)</span></li><li class="c0 li-bullet-0"><span class="c1">Aram Zucker-Scharff (The Washington Post)</span></li><li class="c0 li-bullet-0"><span class="c1">Matthew Ziemer (Pinterest)</span></li><li class="c0 li-bullet-0"><span class="c1">Utkarsh Goel (Akamai)</span></li></ul><p class="c3"><span class="c1"></span></p><h1 class="c38" id="h.tx59951gswac"><span class="c27 c13">Agenda</span></h1><p class="c11"><span class="c1">Times in PT</span></p><h2 class="c29" id="h.k0zzrh9ez9fv"><span>Monday - October 25</span></h2><a id="t.a8de0c0174ea66c23e7edc375578c8c91a5239db"></a><a id="t.1"></a><table class="c25"><tbody><tr class="c5"><td class="c12" colspan="1" rowspan="1"><p class="c17"><span class="c7">Timeslot (PST)</span></p></td><td class="c24 c28" colspan="1" rowspan="1"><p class="c20"><span class="c1">Subject</span></p></td><td class="c30 c28" colspan="1" rowspan="1"><p class="c20"><span class="c1">POC</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">8:00-8:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c20"><span class="c4 c13"><a class="c8" href="#h.l02u9ad5oiy0">Intros, code of conduct, agenda review, meeting goals</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c20"><span class="c1">Yoav, Nic</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">08:30-9:00</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.in5bn6i4dicj">WG introspection</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Nic, Yoav</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:00-9:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.6vf239gzd5ud">Navigation Timing and cross-origin redirects</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Noam Rosenthal</span></p></td></tr><tr class="c5"><td class="c26" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:30~9:45</span></p></td><td class="c24 c36" colspan="1" rowspan="1"><p class="c11"><span class="c1">Break</span></p></td><td class="c30 c36" colspan="1" rowspan="1"><p class="c3"><span class="c1"></span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:45-10:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.nycej1jfk3f8">Preload</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Noam Rosenthal</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">10:30-11:00</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.wookayrgz5d3">Measuring preconnects</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Yoav</span></p></td></tr></tbody></table><p class="c11"><span class="c13">Recordings:</span><span>&nbsp;</span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/eoFhKwZIv64&amp;sa=D&amp;source=editors&amp;ust=1637836983346000&amp;usg=AOvVaw29ahgQCaowIAJcn4ECUi1i">NavigationTiming and cross-origin redirects</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/CST4baiJeeE&amp;sa=D&amp;source=editors&amp;ust=1637836983346000&amp;usg=AOvVaw326er22KEWVZ4OHjq_Cr4W">Preload cache specification</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/SZBb6qpK6ew&amp;sa=D&amp;source=editors&amp;ust=1637836983346000&amp;usg=AOvVaw00Nbz_gcdD16rHdeNpvBUK">Measuring preconnects</a></span><span class="c1">&nbsp;</span></p><h2 class="c29" id="h.iekmeysj2vof"><span>Tuesday - October 26</span></h2><a id="t.c91a46d717634325007024a7229a1cbca6e7d431"></a><a id="t.2"></a><table class="c25"><tbody><tr class="c5"><td class="c12" colspan="1" rowspan="1"><p class="c17"><span class="c7">Timeslot<br>(PST)</span></p></td><td class="c24 c28" colspan="1" rowspan="1"><p class="c20"><span class="c1">Subject</span></p></td><td class="c30 c28" colspan="1" rowspan="1"><p class="c20"><span class="c1">POC</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">8:00-8:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c20"><span class="c4 c13"><a class="c8" href="#h.f3rar6xwkzgu">BFCache</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c20"><span class="c1">Fergal</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c13 c39">08:30-9:00</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.n3yvkdpnm2i"><b>pagevisibility and requestIdleCallback</b>: move processing to HTML?</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Noam Rosenthal</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:00-9:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.aoc5woaj7n42">RUM pain points</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Nic Jansma</span></p></td></tr><tr class="c5"><td class="c26" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:40~9:55</span></p></td><td class="c24 c36" colspan="1" rowspan="1"><p class="c11"><span class="c1">Break</span></p></td><td class="c30 c36" colspan="1" rowspan="1"><p class="c3"><span class="c1"></span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:45-10:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.ufhevfsm67u5">Measuring SPAs</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Yoav</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">10:30-11:00</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.lkz8vrcxxb0c">Animation smoothness</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Michal</span></p></td></tr></tbody></table><p class="c11"><span class="c13">Recording:</span><span>&nbsp;</span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/ljdvpYtgN7E&amp;sa=D&amp;source=editors&amp;ust=1637836983358000&amp;usg=AOvVaw03HGjGRRTc42ljTpVFFPpd">BFCache</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/zWnortGgXTU&amp;sa=D&amp;source=editors&amp;ust=1637836983358000&amp;usg=AOvVaw0IYJ4cJ5m3x9L1Fpx3J2jL">RUM pain points</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/BCecoQYYuZY&amp;sa=D&amp;source=editors&amp;ust=1637836983359000&amp;usg=AOvVaw3amc80ELgbbL635qV2Li5I">Measuring SPAs</a></span></p><h2 class="c29" id="h.pgax8xqr4pe0"><span>Wednesday - October 27</span></h2><a id="t.3ec0d7b74270ac08f9c82f3c8a8871a4aff18b8b"></a><a id="t.3"></a><table class="c25"><tbody><tr class="c5"><td class="c12" colspan="1" rowspan="1"><p class="c17"><span class="c7">Timeslot</span></p><p class="c17"><span class="c7">(PST)</span></p></td><td class="c24 c28" colspan="1" rowspan="1"><p class="c20"><span class="c1">Subject</span></p></td><td class="c30 c28" colspan="1" rowspan="1"><p class="c20"><span class="c1">POC</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">8:00-8:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c20"><span class="c4 c13"><a class="c8" href="#h.i0jj89pvjydu">Zstd Compression</a></span><span class="c4 c13"><a class="c8" href="#h.i0jj89pvjydu">&nbsp;in the Browser</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c20"><span>Nic</span><span class="c1">&nbsp;Jansma</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">08:30-9:00</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c20"><span class="c4 c13"><a class="c8" href="#h.4apxzwsa7si5">Responsiveness measurement in Excel</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c20"><span class="c1">Noam Helfman</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:00-9:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.18mgbl4w1t93">Optimizing Third-party script loading</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Addy Osmani</span></p><p class="c11"><span class="c1">Pat Meenan</span></p></td></tr><tr class="c5"><td class="c26" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:30~9:45</span></p></td><td class="c24 c36" colspan="1" rowspan="1"><p class="c11"><span class="c1">Break</span></p></td><td class="c30 c36" colspan="1" rowspan="1"><p class="c3"><span class="c1"></span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:45-10:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c20"><span class="c4 c13"><a class="c8" href="#h.68mp9m9a6oh">JS self-profiling: Long Tasks and VM state</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c20"><span class="c1">Andrew Comminos</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">10:30-11:00</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.mldk2zafi9mw">Renderblocking attribute</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Xiaocheng Hu</span></p></td></tr></tbody></table><p class="c11"><span class="c13">Recording:</span><span>&nbsp;</span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/Xza2-B7UK2U&amp;sa=D&amp;source=editors&amp;ust=1637836983370000&amp;usg=AOvVaw32lo7WRhe8d8oBAms6aO4a">zstd in the browser</a></span><span class="c13">,</span><span>&nbsp;</span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/-CCgR4NginQ&amp;sa=D&amp;source=editors&amp;ust=1637836983370000&amp;usg=AOvVaw14bOGPtjxRtInhMMUK45cm">responsiveness in Excel</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/DKbv-OGRpi4&amp;sa=D&amp;source=editors&amp;ust=1637836983370000&amp;usg=AOvVaw1iSob83ROH4DhP7SARCv6x">Optimizing 3P script loading</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/it-mPe1ct8Y&amp;sa=D&amp;source=editors&amp;ust=1637836983371000&amp;usg=AOvVaw1J3rrmEbJoj_ONzMTXf_HD">JS profiling improvements</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/8XCplikIwvM&amp;sa=D&amp;source=editors&amp;ust=1637836983371000&amp;usg=AOvVaw2y7bVrBEErfaenD62R5O4C">renderblocking attribute</a></span></p><h2 class="c29" id="h.t11egqakzor0"><span>Thursday - October 28</span></h2><a id="t.730b3f40a451ddc63e8a9aa0809623e6ac4d5038"></a><a id="t.4"></a><table class="c25"><tbody><tr class="c5"><td class="c12" colspan="1" rowspan="1"><p class="c17"><span class="c7">Timeslot</span></p><p class="c17"><span class="c7">(PST)</span></p></td><td class="c24 c28" colspan="1" rowspan="1"><p class="c20"><span class="c1">Subject</span></p></td><td class="c30 c28" colspan="1" rowspan="1"><p class="c20"><span class="c1">POC</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">8:00-8:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.glex7ka68pwu">Adopting incubations &amp; spec status</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Yoav</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">08:30-9:00</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.ribp47msejya">Content negotiation and Client Hints</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Yoav</span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:00-9:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.f1qo12eczzhm">User Preferences Media Features</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Thomas Steiner</span></p></td></tr><tr class="c5"><td class="c26" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:30~9:45</span></p></td><td class="c24 c36" colspan="1" rowspan="1"><p class="c11"><span>Pet camera break</span></p></td><td class="c30 c36" colspan="1" rowspan="1"><p class="c3"><span class="c1"></span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">9:45-10:30</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.rudaey4ntcqb">Personalizing Performance</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://www.linkedin.com/in/nitinpasumarthy/&amp;sa=D&amp;source=editors&amp;ust=1637836983380000&amp;usg=AOvVaw16hTFdLcEErpbLAfoKMdWa">Nitin Pasumarthy</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://www.linkedin.com/in/pvijayanathan/&amp;sa=D&amp;source=editors&amp;ust=1637836983380000&amp;usg=AOvVaw1f_yKZezjMdsQLmjTRECfZ">Prasanna Vijayanathan</a></span></p></td></tr><tr class="c5"><td class="c16" colspan="1" rowspan="1"><p class="c17"><span class="c7">10:30-11:00</span></p></td><td class="c24" colspan="1" rowspan="1"><p class="c11"><span class="c4 c13"><a class="c8" href="#h.ly18vhvtbjxq">LCP updates</a></span></p></td><td class="c30" colspan="1" rowspan="1"><p class="c11"><span class="c1">Yoav</span></p></td></tr></tbody></table><p class="c11"><span class="c13">Recording:</span><span>&nbsp;</span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/7YfZkDKANA4&amp;sa=D&amp;source=editors&amp;ust=1637836983382000&amp;usg=AOvVaw0WY6b8mcxm1KlYFPVq35J8">Content negotiation and Client Hints</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/XYeOafm3N4A&amp;sa=D&amp;source=editors&amp;ust=1637836983383000&amp;usg=AOvVaw337PkS1oacX8GPY-FdSj8H">User preferences media features</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/rmsXC7zXIus&amp;sa=D&amp;source=editors&amp;ust=1637836983383000&amp;usg=AOvVaw3KaqnIKTwPwDvMUMSc21By">Personalizing Performance</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/yP0ZcqLM8gU&amp;sa=D&amp;source=editors&amp;ust=1637836983384000&amp;usg=AOvVaw3biVWybomfuBrAaAyW21kc">LCP updates</a></span></p><h1 class="c38" id="h.pig2hdanvast"><span class="c31">Sessions</span></h1><h2 class="c35" id="h.l02u9ad5oiy0"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1aB4kWqIKj743u2AtXfvO6QuOjZZRIqwrS5rNCUg11u8/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1637836983384000&amp;usg=AOvVaw18twoOJ8A2InVp4ZWCTUev">Intros, code of conduct, agenda review, meeting goals</a></span><span>&nbsp;- Nic, Yoav</span></h2><h3 class="c2" id="h.no5x3t25zmou"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_mak73ue8ggfd-0 start"><li class="c0 li-bullet-0"><span class="c1">TPAC 2021!</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Missing: Provide methods to observe and improve aspects of application performance of user agent features and APIs</span></li><li class="c0 li-bullet-0"><span class="c1">... Notable highlights including tighter integration with Fetch and HTML</span></li><li class="c0 li-bullet-0"><span class="c1">... Spec cleanup improve processing models and align better with Fetch/HTML</span></li><li class="c0 li-bullet-0"><span class="c1">... A/B testing meeting last Feb which had a lot of insights from industry at large</span></li><li class="c0 li-bullet-0"><span class="c1">... Helped bridge gaps between different parts of the industry. &nbsp;Hoping to see results at some point.</span></li><li class="c0 li-bullet-0"><span class="c1">... Help from W3C folks to setup auto-publishing and auto-tidying. &nbsp;Helps smooth over day-to-day friction in publishing specs</span></li><li class="c0 li-bullet-0"><span class="c1">... 168 closed issues on different Github repos</span></li><li class="c0 li-bullet-0"><span class="c1">... Rechartered takes us until 2023</span></li><li class="c0 li-bullet-0"><span>... Incubations</span><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 341.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0.png" style="width: 624.00px;<b> height</b>: 341.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Talk more about incubations tomorrow</span></li><li class="c0 li-bullet-0"><span class="c1">... Seeing if we're interested in adopting them more officially</span></li><li class="c0 li-bullet-0"><span class="c1">... All seeing an increase in adoption</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 317.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(1).png" style="width: 624.00px;<b> height</b>: 317.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-0"><li class="c0 li-bullet-0"><span class="c1">... Working group having a direct impact on users</span></li><li class="c0 li-bullet-0"><span class="c1">... New members!</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 309.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(2).png" style="width: 624.00px;<b> height</b>: 309.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-0"><li class="c0 li-bullet-0"><span class="c1">... Housekeeping and Code of Conduct</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 352.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(3).png" style="width: 624.00px;<b> height</b>: 352.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-0"><li class="c0 li-bullet-0"><span class="c1">... Recording presentations and publishing the videos</span></li><li class="c0 li-bullet-0"><span class="c1">... Would appreciate secondary scribes</span></li><li class="c0 li-bullet-0"><span class="c1">... Yoav and Nic will take turns with minuting</span></li><li class="c0 li-bullet-0"><span class="c1">... Once in a while we lose a sentence or the speaker has moved on and we're behind in scribing</span></li><li class="c0 li-bullet-0"><span class="c1">... Having someone to take on as secondary scribe is extremely helpful</span></li><li class="c0 li-bullet-0"><span class="c1">Quick overview of scribe requirements… capture sentiment and cover when Nic/Yoav are talking.</span></li></ul><h2 class="c29" id="h.in5bn6i4dicj"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1W6-JuRAVv6lbClM1QOdwmt1_9LIM5ix2g_lkWnx02m0/edit%23slide%3Did.p&amp;sa=D&amp;source=editors&amp;ust=1637836983388000&amp;usg=AOvVaw1zz2gMKNnnwg93SbtrJCNS">WG introspection</a></span><span>&nbsp;- Nic</span></h2><h3 class="c2" id="h.xlr7cyu171e3"><span class="c18 c10">Summary</span></h3><ul class="c19 lst-kix_8deurvnuojkb-0 start"><li class="c0 li-bullet-0"><span class="c1">Rotating meeting times can help folks in different TZs</span></li><li class="c0 li-bullet-0"><span class="c1">Discussion summaries and WG updates can keep the broader community informed. &nbsp;Also created Slack/Matrix channels for comms.</span></li><li class="c0 li-bullet-0"><span class="c1">There’s interest in expanding the discussion scope, assuming we can navigate IPR</span></li></ul><h3 class="c2" id="h.wgmv9ny7e1rb"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_9lv5ekihldmd-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Want to see where we are as a group.</span></li><li class="c0 li-bullet-0"><span class="c1">… Slides meant to facilitate discussion - feel free to bring up ideas</span></li><li class="c0 li-bullet-0"><span class="c1">… The WG has 94 participant across 20 organizations</span></li><li class="c0 li-bullet-0"><span class="c1">… Decent increase in participation</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-1 start"><li class="c11 c21 li-bullet-0"><span class="c1"><b>Stats</b>: 94 participants (signups), 20 organizations, 4 invited experts</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Increase in participation over time</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-0"><li class="c0 li-bullet-0"><span class="c1">How can we improve?</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-1 start"><li class="c11 c21 li-bullet-0"><span class="c1">Diversity, Meeting Times, Newsletter, Social Media/Twitter engagement, Discussion Scope, …</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-0"><li class="c0 li-bullet-0"><span class="c1">Diversity:</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-1 start"><li class="c11 c21 li-bullet-0"><span class="c1">Want to promote diversity of people, voices, genders, companies and locations</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Want to reduce barriers as much as possible</span></li><li class="c11 c21 li-bullet-0"><span class="c1">TimeZones - have a US/EU focus, but times are more US friendly. A recurrent point of feedback</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Cost of participation - may be interesting to see if it stopped folks from participating.</span></li><li class="c11 c21 li-bullet-0"><span class="c1">A lot of people may be volunteered or only partially supported by their employer. Maybe we can better highlight accomplishments to make that easier</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Technical history can be daunting</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-0"><li class="c0 li-bullet-0"><span class="c1">Meeting times - currently 1pm EST 10am PST. 7pm for EU, middle of night for Asia</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-1 start"><li class="c11 c21 li-bullet-0"><span class="c1">One thought is to have an alternating cadence to make it easier for EU folks. E.g. maybe 2 hours earlier</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Doesn’t help with China and Japan</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Any thoughts?</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-0"><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: Are meetings recorded?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: In the past we were able to record the full meetings. Currently we only record presentations with no discussions, due to W3C process changes. We have minutes.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: What are other teams doing? What day is the group meeting?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Thursdays. Other groups have most of the participants be US based.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: From what I've seen in other groups it's mostly US centric. &nbsp;Early US West</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamR</b>: Rotating 2 hours earlier would be significantly better for IL TZ</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Any concerns from US folks?</span></li><li class="c0 li-bullet-0"><span><b>Nic</b>: Should we do a poll?</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-1 start"><li class="c11 c21 li-bullet-0"><span><b>Note</b>: Available at </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/forms/d/1jkZPL8BjsN112uJi75DO2n0RnaSCVc_5Uft66hxoGIE/edit&amp;sa=D&amp;source=editors&amp;ust=1637836983392000&amp;usg=AOvVaw2qUHxI2O_X_RysTt8QHXnZ">https://docs.google.com/forms/d/1jkZPL8BjsN112uJi75DO2n0RnaSCVc_5Uft66hxoGIE/edit</a></span><span class="c1">&nbsp;</span></li></ul><ul class="c19 lst-kix_mak73ue8ggfd-0"><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: One option is rotating. &nbsp;Another option is if US West are open to 2 hrs earlier.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: That doesn’t solve Asia though.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamR</b>: If we have a particular participant from Asia, we can have a one-time meeting that is better for those timezones.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Great idea. Will follow up with a poll</span></li><li class="c0 li-bullet-0"><span class="c1">.. Newsletter</span></li><li class="c0 li-bullet-0"><span class="c1">… meeting minutes take a while to digest. This suggestion is for a quarterly updates coming from the group. Could allow folks that can’t keep up with the day to day to get a glimpse of what the group is working on</span></li><li class="c0 li-bullet-0"><span class="c1">… Would require work, but maybe presenters can create blurbs of their presentations and discussion conclusions</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: Like the idea of a newsletter but curious about the intended audience. Is it for ourselves or for an external audience. Are other WGs doing that?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Not aware of other WGs doing that.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Carine</b>: We had WGs that had their own updates. Preferred way is to publish a blog post on the W3C blog</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: What I've done in the past for TPACs is have a 3-line summary for what was presented, discussion and conclusions. &nbsp;This was driven a lot by folks presenting. &nbsp;Makes sense to extend this to bi-weekly presentations. &nbsp;Once in a while wrap them up into a digestible form.</span></li><li class="c0 li-bullet-0"><span class="c1">... Michal to answer your question I think it can be useful for ourselves, to see discussions without reading minutes</span></li><li class="c0 li-bullet-0"><span class="c1">... But more for external audiences to see what we're discussing and see if they want to be &nbsp;part of that discussion</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: One thing that could be nice when trying to read the summary, is reading arguments before/against. &nbsp;Any time you're trying to read through things, it's useful to see arguments. &nbsp;Could be useful for a broader audience where english is not primary language or not as technical.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Would be helpful to have the initiator/presenter to do that work that day, and the chairs can commit to organize that later on. (rather than the chair trying to summarize). </span></li><li class="c0 li-bullet-0"><span class="c1">… We could try it and see what it gives. For last year’s TPAC we had presenters summarizing. We can try it and see</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: Good idea. Personally had questions from my org where folks wanted highlights from the WG, and had to write them himself. Having this would be useful.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Agree it’d be nice to have an easy place to point out things that can be later shared with internal orgs.</span></li><li class="c0 li-bullet-0"><span>… </span><span class="c13">Followup</span><span class="c1"><b></b>: we’ll try to do that and see how it goes</span></li><li class="c0 li-bullet-0"><span class="c1">... Social media!</span></li><li class="c0 li-bullet-0"><span class="c1">… Trying to use it again, mostly around notifications for meetings, minutes available, etc</span></li><li class="c0 li-bullet-0"><span class="c1">… Share updates with the community</span></li><li class="c0 li-bullet-0"><span class="c1">… Worthwhile to have a slack channel for the webperf WG on the webperformance slack?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Matrix</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Any appetite for a Matrix channel?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamR</b>: Matrix makes more sense</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andy</b>: Depends on who you want to reach</span></li><li class="c0 li-bullet-0"><span><b>Nic</b>: we could have channels on both and see what happens. </span><span>Let’s give that a try</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: both makes sense</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: We've been talking with a few folks to see how we can improve things and make it more interesting</span></li><li class="c0 li-bullet-0"><span class="c1">... One point of feedback was that current discussions are highly focused on WG deliverables, mostly around webperf measurement</span></li><li class="c0 li-bullet-0"><span class="c1">... Somehow we have less ways of discussing improving performance</span></li><li class="c0 li-bullet-0"><span class="c1">... Less deliverables that touch on that</span></li><li class="c0 li-bullet-0"><span class="c1">... I thought we could instead of limiting discussion scope to WG deliverables to somewhat expand it and discuss work that is impacting web performance, happening in WHATWG/WICG and elsewhere</span></li><li class="c0 li-bullet-0"><span class="c1">... Reach out to other working groups</span></li><li class="c0 li-bullet-0"><span class="c1">... Generally have a more working group opinion on things happening in webperf space instead of focusing just on deliverables</span></li><li class="c0 li-bullet-0"><span class="c1">... WDYT about discussion scope expansion? &nbsp;Shouldn't impact charter or deliverables, just things we would be discussing in WG that we wouldn't discuss otherwise</span></li><li class="c0 li-bullet-0"><span class="c1">... Benefits for us could make it more interesting. &nbsp;Benefits for broader platform is it could bring our expertise to other discussions where we're not necessarily seeing it right now, i.e. in HTML spec. &nbsp;Right now a missed opportunity.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: I think it's a good idea, the collected expertise of the members in this group would be a shame to waste. &nbsp;A lot happening in field right now going beyond scope of standards. &nbsp;Impacting how people use the platform. &nbsp;So I'm definitely in favor.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Maybe I'm wishful hearing, are you suggesting expanding the scope to userland issues (framework) or is that overreach?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Framework issues can be a really touch subject and could be political</span></li><li class="c0 li-bullet-0"><span class="c1">... Userland tendencies and approaches yes</span></li><li class="c0 li-bullet-0"><span><b>Carine</b>: I'm wondering if we should open </span><span>W3C CG</span><span class="c1">&nbsp;to see if they want to pair on that sort of stuff. &nbsp;Going too far from charter we could have IPR problems. &nbsp;Others might think we're doing too much incubation and not other activities like testing and going to REC.</span></li><li class="c0 li-bullet-0"><span class="c1">... Pair with another CG and see how it goes</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Could be interesting in terms of other working groups like Immersive Web where they have a similar model. &nbsp;Do you know what they're doing there, and would it make sense to split discussions, once a month CG and once a month WG.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Carine</b>: Immersive Web was predating WG. They were in CG first and moved to WG.</span></li><li class="c0 li-bullet-0"><span class="c1">... There are possibilities of doing more incubation and doing more outreach</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: I thought you said it was already in the charter and we haven't done this enough, and that was the feedback rather than expanding.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Wasn't thinking of expanding the charter. &nbsp;Not part of deliverables.</span></li><li class="c0 li-bullet-0"><span class="c1">... One specific example in group's expertise would've been useful, for lazyloading on HTML I think there were this working group should've provided more feedback on and haven't.</span></li><li class="c0 li-bullet-0"><span class="c1">... That's work happening in HTML, so a WebPerf CG wouldn't have helped there</span></li><li class="c0 li-bullet-0"><span class="c1">... What I'm thinking is essentially bring up subjects to this group where members of this group can discuss, and as a groups we can provide feedback on relevant issues to e.g. HTML or other specs</span></li><li class="c0 li-bullet-0"><span class="c1">... And if that feedback is targeted at WICG I think that is fine, working group members are probably also WICG members.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Could be sketchy from WHATWG side.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: If someone provided feedback on WG call and they're not a WHATWG member, that could be problematic.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Would give this more thought. &nbsp;A CG won't help either, as the CG will have IPR commitment but won't be WHATWG members.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Carine</b>: Except that it's not limited to W3C membership</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Philippe</b>: Let's say there's a HTML proposal that happens in WICG and gets a PR for WHATWG, how do you guys handle it?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: There is a risk there that's assessed on a case-by-case basis.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Philippe</b>: IPR on contributions but not on the whole. &nbsp;Better than nothing. &nbsp;There's a risk but it's somewhat limited</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Let me think through the IPR risk here, a broader question is is there interest for these discussions to happen on the WG calls.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: I have a vested interest, but I don't know there are other WGs that in incubation phase would be brainstorming and working through issues. &nbsp;WHATWG works off PRs and issues.</span></li><li class="c0 li-bullet-0"><span class="c1">... Not aware of another WebPerf group other than this one. &nbsp;It does help to have broad industry commitment and contribution early in brainstorming phase around gaps, working across browsers, privacy, developers, etc</span></li><li class="c0 li-bullet-0"><span class="c1">... e.g. Preload</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: More review on WHATWG side would be welcome. &nbsp;Good to have other people from different perspectives on these PRs.</span></li><li class="c0 li-bullet-0"><span><b>Yoav</b>: Take an AI to figure out if this is a mess from IPR perspective, and think through ways we could bring in those issues from HTML/Fetch/etc for the group to discuss.</span></li></ul><p class="c3"><span class="c1"></span></p><h2 class="c29" id="h.6vf239gzd5ud"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://github.com/w3c/navigation-timing/issues/160&amp;sa=D&amp;source=editors&amp;ust=1637836983401000&amp;usg=AOvVaw0vua_Aihah-eM3F_85WtHb">Navigation Timing and cross-origin redirects</a></span><span class="c22">&nbsp;- Noam Rosenthal</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/eoFhKwZIv64&amp;sa=D&amp;source=editors&amp;ust=1637836983402000&amp;usg=AOvVaw1K7Q3qDFMp1BhFGNIsenK_">Recording</a></span></p><h3 class="c2" id="h.tip4anqutgu9"><span>Summary</span></h3><ul class="c19 lst-kix_vlfbbop29bmy-0 start"><li class="c0 li-bullet-0"><span class="c1">Navigation Start being the time origin exposes cross-origin information, about the length of the time before the user reached the document’s origin. This is a problem, however any change to this would incur a lot of implications on the baselines of tests and on the usefulness of RUM testing in certain situations.</span></li><li class="c0 li-bullet-0"><span class="c1">It is not clear how to proceed, Though some suggestion were brought up such as allowing same-site redirects to still be exposed in this way.</span></li><li class="c0 li-bullet-0"><span class="c1">The conversation was missing people from the security/privacy space to weigh in on the implication of keeping things as they are. &nbsp;</span></li></ul><h3 class="c2" id="h.b1kzi7h0edn2"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_pq1l6rjw9q5s-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Starting with a controversial topic! Navigation Start Time</span></li><li class="c0 li-bullet-0"><span class="c1">... Polarized discussion on the issue</span></li><li class="c0 li-bullet-0"><span class="c1">... From HR time spec</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 213.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(4).png" style="width: 624.00px;<b> height</b>: 213.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... When you click a link or submit a form, not necessarily the same origin as where you're going</span></li><li class="c0 li-bullet-0"><span class="c1">... Time Origin is our 0 / epoch for everything</span></li><li class="c0 li-bullet-0"><span class="c1">... All of our PerformanceTimeline numbers are based on that, performance.now() uses that as its origin</span></li><li class="c0 li-bullet-0"><span class="c1">... Point in time where user started navigation somewhere</span></li><li class="c0 li-bullet-0"><span class="c1">... Takes us to a X-O issue with this</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 300.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(5).png" style="width: 624.00px;<b> height</b>: 300.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... Lets say a user navigates using address bar to site-a.com</span></li><li class="c0 li-bullet-0"><span class="c1">... site-a.com sends 302 to site-b.com</span></li><li class="c0 li-bullet-0"><span class="c1">... Exposed Cross-Origin time</span></li><li class="c0 li-bullet-0"><span class="c1">... "Prehistory" before I know what happened. &nbsp;I know how long it took but not what happened at all.</span></li><li class="c0 li-bullet-0"><span class="c1">... Not the only case</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 237.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(6).png" style="width: 624.00px;<b> height</b>: 237.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... site-a.com submits a form to site-a.com, on POST send back a new Location to site-b.com</span></li><li class="c0 li-bullet-0"><span class="c1">... So Pre-History is exposed, maybe on site-b.com I can detect there was a POST</span></li><li class="c0 li-bullet-0"><span class="c1">... Doesn't have to be a redirect, because navStart happens before a bunch of events, unload/pagehide/vischange, those are fired after navigation start</span></li><li class="c0 li-bullet-0"><span class="c1">... So any time spent on some site that runs those events would be noticed by that Prehistoric time on site-b.com</span></li><li class="c0 li-bullet-0"><span class="c1">... All of those are combined, so Prehistoric time is a cloud of different things</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 208.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(7).png" style="width: 624.00px;<b> height</b>: 208.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... unload/pagehide/vischange, submit, redirects, etc</span></li><li class="c0 li-bullet-0"><span class="c1">... Things the destination can figure out</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 201.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(8).png" style="width: 624.00px;<b> height</b>: 201.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 210.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(9).png" style="width: 624.00px;<b> height</b>: 210.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... For RUM there's also random things influencing the numbers</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 160.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(10).png" style="width: 624.00px;<b> height</b>: 160.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... Malicious effects on other site's loading times by sending users with long redirects</span></li><li class="c0 li-bullet-0"><span class="c1">... Graph between potentially harmful vs. potentially useful:</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 332.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(11).png" style="width: 624.00px;<b> height</b>: 332.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... Conclusions</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 145.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(12).png" style="width: 624.00px;<b> height</b>: 145.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... Two main options </span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 156.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(13).png" style="width: 624.00px;<b> height</b>: 156.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1">... Option 1 is to stay the same, too late to change, would affect epoch and have comparison challenges</span></li><li class="c0 li-bullet-0"><span class="c1">... Option 2 is to move time origin to redirect start time of current origin. &nbsp;I just don't know if I was redirected here by something that took a long time.</span></li><li class="c0 li-bullet-0"><span class="c1">... If this is something we want to change, how would we ship this?</span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 613.00px;<b> height</b>: 232.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(14).png" style="width: 613.00px;<b> height</b>: 232.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_pq1l6rjw9q5s-0"><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: RUM is Real-User Monitoring, apps and dashboards that reflect the user performance and would be affected by this change. &nbsp;If we changed timeOrigin in this particular version of this browser that shipped this change, all impacted metrics affected by X-O redirects or other events, would move down which seems like a perf improvement but would result in confusion</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: One option that I forgot to put in slides is to change resolution to timeOrigin that's very coarse, but still helps provide the time to get here</span></li><li class="c0 li-bullet-0"><span class="c1">... Could help fix some of the issues with session sharing, but not share sensitive information</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: I think that exposing the time of navigation is also possibly a problem. &nbsp;Once we've implemented various anti-tracking policies, the timing allows these two origins to do some correlation</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Agree this is a future problem, not a current problem. &nbsp;I think Jan pointed out current problems with what we are doing now, specifically referrer guessing. &nbsp;Because referrer A uses a slow redirector and referrer B uses a fast redirector, you could guess which one.</span></li><li class="c0 li-bullet-0"><span class="c1">... From my perspective that leads me to believe that we should fix this, but interested in the "how can we ship this discussion"</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: I think if we come up with a solution it better take that into account. &nbsp;If we're making a change, make it once.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Sergio</b>: Provide an example that it's not particularly useful. &nbsp;In production at Automatic, we host wordpress.com and people have subdomains of wordpress.com. &nbsp;We set up RUM with monitoring based on NavTiming. &nbsp;Looked for pages with slow DNS times. domainLookupEnd</span></li><li class="c0 li-bullet-0"><span class="c1">... Saw a lot of those in a couple pages, this isn't happening in DNS, it's happening before that.</span></li><li class="c0 li-bullet-0"><span class="c1">... Happening if you type if you picked a wrong subdomain, you go to wordpress.com/typo. &nbsp;We found this through our logs that we found multiple levels of redirects, and caused people to take a lot of time landing on the final page.</span></li><li class="c0 li-bullet-0"><span class="c1">... We've been able to mitigate some of this by removing a few HTTP to HTTPS redirects</span></li><li class="c0 li-bullet-0"><span class="c1">... Been able to mitigate a real perf problem for users from this API</span></li><li class="c0 li-bullet-0"><span class="c1">... Not saying this problem doesn't have privacy issues or shouldn't be fixed</span></li><li class="c0 li-bullet-0"><span class="c1">... We wouldn't never been able to think to add e.g. TAO headers to find this problem</span></li><li class="c0 li-bullet-0"><span class="c1">... Maybe have a coarse number to define how much time was spent before navigation, or a "there were redirects"</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Could we assume some of the redirects were Same Site?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Sergio</b>: Possible, but in this particular instance it's subdomains that don't exist</span></li><li class="c0 li-bullet-0"><span class="c1">... Could be from custom domains or auth flows or redirect flows for things like OAuth</span></li><li class="c0 li-bullet-0"><span class="c1">... There's a category of performance issues that would become invisible unless you have the right headers set for every request</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: For this particular problem you don't need every request to have the right headers, unless the earliest one has the right headers</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Sergio</b>: That's correct, there are a few issues as the metric definitions would change based on whether the headers would be set or not</span></li><li class="c0 li-bullet-0"><span class="c1">... I just wanted to bring up this example showing where this info was useful</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andy</b>: I get why we want to change it. &nbsp;Removing what that time does is it removes the reflection of User Experience. &nbsp;Losing long redirect times changes how e.g. the experience of LCP is reported</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: I think it's interesting to think of this as a two-part problem: How can we fix the current problem, how can we ship something that doesn't break dashboards. &nbsp;Part two is how we can re-expose that information in a safe way. &nbsp;Sounds like there's an appetite for part two.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andy</b>: Value in knowing that data, that time</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: One question about discussion is, are you just thinking about moving navigationStart or adjusting redirectStart/redirectEnd or unloadStart/unloadEnd. &nbsp;So right now navigationStart is the only way to gather information for X-O pages. </span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: redirectStart/End is under-specified, go to this problem by trying to specify it</span></li><li class="c0 li-bullet-0"><span class="c1">... If we choose to live with current situation, which I don't think we can, we might as well expose it</span></li><li class="c0 li-bullet-0"><span class="c1">... But first of all I want to start with epoch</span></li><li class="c0 li-bullet-0"><span class="c1">... That information is the hardest to change</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: What we use some of the data for in same-origin, redirects and unload times we've had real actionable data to drive those down</span></li><li class="c0 li-bullet-0"><span class="c1">... Other is that domains for a large company is complicated, many TLDs</span></li><li class="c0 li-bullet-0"><span class="c1">... Reason why solving this could lose data for optimizing user experience</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: You'd need something like First Party Sets or something</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: A lot of what we've heard so far, but I'd be really concerned that the performance measurements wouldn't be usefully representative of the UX. &nbsp;As far as the loading from when they took an action until anything.</span></li><li class="c0 li-bullet-0"><span class="c1">... Canonical problem case is an ad placed somewhere on 3P site or AdWords that has click-trackers, and marketing team adds trackers for the site, you lose ability to see the UX is bad</span></li><li class="c0 li-bullet-0"><span class="c1">... I think we'd be blowing &nbsp;up the usability of the loading metrics</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: One thing we could do as a bandaid is we could block this information if Referrer policy says we should block it</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Katie</b>: To add to data points where it's valuable, just last month we used abnormally long prefetch times to find traffic from a scraper/bot. &nbsp;We saw huge spikes in RUM from page load time. &nbsp;A lot of these data points have abnormally large before-Fetch. &nbsp;We used that point to track down other signals that it's a scraper/bot that we could block from our RUM collection.</span></li><li class="c0 li-bullet-0"><span class="c1">... I'll also add that it's a little confusing sometimes that with this data, you see the problem from these redirects on the following page, not the source page. &nbsp;We saw problems from the checkout page on our home page. &nbsp;Changes happened on the checkout page, but metrics were not showing them in the checkout page, but on the next one.</span></li><li class="c0 li-bullet-0"><span class="c1">... Not always intuitive to use, but there's value to knowing that and to uncover bugs and bad experiences</span></li><li class="c0 li-bullet-0"><span class="c1">... Does measure something of value to users</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: Sounds like there's a lot of people that think the data is valuable. &nbsp;Is this an urgent problem to fix?</span></li><li class="c0 li-bullet-0"><span class="c1">... Doesn't seem like the solutions would work for the discussed use-cases</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: I don't think this is urgent to fix, but I ran into it. &nbsp;By coarsening the numbers, the averages and big problem could be useful for people, but harder to track. &nbsp;Could be bandaid to problem, can't correlate click-time on navStart on millisecond to see it's the same user.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Agree it's not necessarily urgent, but there is at least one problem we know of. &nbsp;For sites that have Referrer policy, that could be used to infer which site linked to. &nbsp;Seems like a cross-origin leak that we should fix once, ideally.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: Can you explain the Referrer issue?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Your traffic is coming from two major sites. &nbsp; Both don't send Referrer. &nbsp;One has a fast redirector and the other has a slow redirector. &nbsp;You'd be able to tell which of the two sites sent traffic based on timing.</span></li><li class="c0 li-bullet-0"><span class="c1">... Don't know how realistic that scenario is or urgency</span></li><li class="c0 li-bullet-0"><span class="c1">... More future-facing scenario where we don't want Site-A communicating userID to Site-B. &nbsp;navigationStart and click time could help them communicate bits of information between two sites.</span></li><li class="c0 li-bullet-0"><span class="c1">... Ideally we would want to minimize the amount of bandaids here and come up with a real solution</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: I suggest we continue this on Github issue</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: What is the size of the impact on dashboards?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: baseline changes cause confusion. This is a thing that will happen incrementally, and would not be able to compare the metrics.</span></li><li class="c0 li-bullet-0"><span class="c1">… Will change all the metrics. Would definitely be a big concern</span></li><li class="c0 li-bullet-0"><span class="c1">… As a counter point, some customers excluded all the “pre-historic” data, because they don’t care about that. So some of them choose to start at fetchStart</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: +1. It would be extremely disruptive, so we have to be very careful rolling this out. </span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Some corps may have millisecond goals to their metrics, and changing the baseline would require communication</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: Same challenge with synthetic. RUM can be trusted, so changes can be disruptive</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: There were changes to CWVs over the past couple of months, so if communicated appropriately and correctly, it’s something that people can deal with.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam R</b>: The forum of this conversation that are into performance rather than privacy. We should talk about it with both teams in the room. People can bring valuable information about attack vectors from that works.</span></li></ul><h2 class="c29" id="h.nycej1jfk3f8"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://github.com/whatwg/fetch/issues/590&amp;sa=D&amp;source=editors&amp;ust=1637836983416000&amp;usg=AOvVaw0MBQJNW3nVTW9CzXrowHvT">Preload</a></span><span class="c22">&nbsp;- Noam Rosenthal</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/CST4baiJeeE&amp;sa=D&amp;source=editors&amp;ust=1637836983417000&amp;usg=AOvVaw1Xe5KrC2WGWFstBCceTDAu">Recording</a></span></p><h3 class="c2" id="h.hk025wg35tu0"><span>Summary</span></h3><ul class="c19 lst-kix_75yzxb4d5d2u-0 start"><li class="c0 li-bullet-0"><span class="c1">Preload cache is not specified, leading to a lot of different behavior across browsers.</span></li><li class="c0 li-bullet-0"><span class="c1">It was pointed out that preload headers should be supported alongside link headers.</span></li><li class="c0 li-bullet-0"><span>The </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/whatwg/html/pull/7260&amp;sa=D&amp;source=editors&amp;ust=1637836983418000&amp;usg=AOvVaw1SrpdDU0J4b4tNogKyiUQu">Pull request</a></span><span class="c1">&nbsp;for this is underway.</span></li></ul><h3 class="c2" id="h.vuyuw0u5maq1"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_hffh46jr22us-0 start"><li class="c0 li-bullet-0"><span><b>Noam</b>: Conversation about preload - </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/whatwg/fetch/issues/590&amp;sa=D&amp;source=editors&amp;ust=1637836983418000&amp;usg=AOvVaw1BJnvqLVIEFMWjw44HTiuZ">issue #590</a></span></li><li class="c0 li-bullet-0"><span class="c1">… Came from an investigation of what preloads are and what they should be</span></li><li class="c0 li-bullet-0"><span class="c1">… Premise - fetch early something you’d use later</span></li><li class="c0 li-bullet-0"><span class="c1">… Avoiding a situation where things you know you need to load are delayed - a good problem to solve</span></li><li class="c0 li-bullet-0"><span class="c1">… But the premise doesn’t go into the details</span></li><li class="c0 li-bullet-0"><span class="c1">… 3 topics:</span></li><li class="c0 li-bullet-0"><span class="c1">… availability - once you loaded the resource, is it available forever, for any request, in workers?</span></li><li class="c0 li-bullet-0"><span class="c1">… caching - should preload interact with cache headers? What does it mean to expire? Can it expire before it loads?</span></li><li class="c0 li-bullet-0"><span class="c1">… error handling - preloaded the resource and it’s an error, should you try to reload before use? If it’s not a network error, but an image you can’t decode? 404?</span></li><li class="c0 li-bullet-0"><span class="c1">… Not theoretical issues, but implemented very differently between the different browsers. Resources errored in preload will be fetched again. Same for undecodable images. Preload with fetch is inconsistent. </span></li><li class="c0 li-bullet-0"><span class="c1">… Chrome optimizes for next request, Chromium will keep the preload for the next request, but not after that (beyond HTTP cache)</span></li><li class="c0 li-bullet-0"><span class="c1">… It’s not necessarily a huge issue for users as the worst case is a double request, but getting it to work across browsers is difficult. You can improve performance in one browser and hinder it in another.</span></li><li class="c0 li-bullet-0"><span class="c1">… Possible solutions, trying to have a simple definition:</span></li><li class="c0 li-bullet-0"><span class="c1">… naive early load - fetch the resource and count on the HTTP cache to keep the response.</span></li><li class="c0 li-bullet-0"><span class="c1">… Could result in double requests if the HTTP cache evicted</span></li><li class="c0 li-bullet-0"><span class="c1">Type specific resource cache - uses the `as` value and adds it to the list of loaded images. Problem here is that un-decoded images can double download.</span></li><li class="c0 li-bullet-0"><span class="c1">... Also that type-specific cache would need to be specified</span></li><li class="c0 li-bullet-0"><span class="c1">… Strong Cache - similar to the Cache object of SW, and ignore caching headers. Equivalent to having the link header hold the response, and have future element reuse that response before calling the Fetch algorithm. Need to be careful with workers.</span></li><li class="c0 li-bullet-0"><span class="c1">Similar to having a cache object is a SW, we return the response regardless of if it’s an error, etc</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: One thing about Chromium implementation is the memory cache as a fallback for Preload cache. &nbsp;Some things are kept in the memory-cache that may not go to the HTTP cache. &nbsp;One of the benefits of that architecture in Webkit and Chromium, is that the HTTP cache has more overhead. &nbsp;Having a close-by cache is beneficial vs. loading things into HTTP cache and hoping for the best</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: See memory cache similar to HTTP cache, it interacts with cache headers.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: To some extent</span></li><li class="c0 li-bullet-0"><span class="c1">... It's equivalent to Webkit Resource Cache</span></li><li class="c0 li-bullet-0"><span class="c1">... Memory Cache is also not well defined, possibly another issues</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: I don't know how important it is to discuss, but when would something NOT be in Preload Cache but would be in Memory Cache.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Chromium-specific, after first request is hit (preload with IMG tag using preload), resource is no longer in Preload cache but resource is maybe in Memory cache, assuming another element is holding it</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Preload is a "strong cache" for one hit</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Memory cache doesn't necessarily respect Cache headers?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Correct, it's a weak cache so if no element is holding that resource, it's gone from the cache. &nbsp;Respecting some cache headers but not all, e.g. no-store. &nbsp;Maybe some variant of Vary header. &nbsp;Won't necessarily respect Caching lifetimes. &nbsp;Considered since it's loaded in document once, it can be used in same document again even if it's expired</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: What are the conceptual problems with trying to merge those caches, Memory and Preload Caches</span></li><li class="c0 li-bullet-0"><span class="c1">... It would no longer be one-time-use, is that a problem?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: How cache started in Chromium, Preload cache is version of Memory cache</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Semantics are different from just one-use, ignores no-cache etc. &nbsp;Preload allows you to re-use that one-time-only API, where Memory Cache wouldn't cache it at all.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Primarily around Fetch and XHR calls?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Script returning different content for a URL, e.g. ad</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: JSONP scenario</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Many of those scenarios I wouldn't expect them to use Preload</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Resource Cache is fairly limited, its scope is wider. &nbsp;e.g. a stylesheet could be cached in one document and re-used in the next document. &nbsp;Where Preload is scoped to a document?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Yes</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Because Memory Cache is a weak cache, it should evict resources</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: If you keep current document open and navigates to a new tab, it could re-use</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: If same renderer</span></li><li class="c0 li-bullet-0"><span class="c1">... With a new process you may have to go to the HTTP Cache</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Seems to me the bigger distinction is that Preload is not just caching, then it's also parsing or additional action for various types of resources, not just loading into memory as-is</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: That might not be observable, up to implementations</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Optimization that you may or not notice</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: It is web-exposed, things not in Memory Cache don't have ResTiming entries</span></li><li class="c0 li-bullet-0"><span class="c1">... If you go to the HTTP Cache you do trigger them</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Seems to be a significant implementation distinction in browsers between Memory Cache and Preload Cache.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: That problem is what can create several network requests in scenario of invalid image and things</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Exactly if you don't parse the image or script you don't know it's invalid</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Simon</b>: Related topic, speculative HTML parsing. &nbsp;Is that considered in this realm of things.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Related, they're cache in Memory Cache. &nbsp;Slightly different rules between WebKit and Chromium</span></li><li class="c0 li-bullet-0"><span class="c1">... Initially Preload Cache was just another case of speculative parsing we're using Memory Cache for, later changed in Chromium</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Simon</b>: In Memory Cache for speculative parsing, there is no reference for the resource</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: No reference to the element</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Maybe there's ways where we can merge concepts but keep the same behavior? &nbsp;If something was entered into this cache due to Preload it has a one-time flag. &nbsp;Flag can be considered for different scenarios.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: One case is if you have link rel=preload, and you remove the link, does it stay in Memory Cache or does it get removed?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Yes removed, possibly in HTTP Cache</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: There with a one-time flag?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: But the link was what put it there with a one-time flag</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: I think you can make an argument either way</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: If we create a semantic where link tag is responsible for reference, you can remove link tag when you no longer want to use it</span></li><li class="c0 li-bullet-0"><span class="c1">... Remove it when ready</span></li><li class="c0 li-bullet-0"><span class="c1">... Definitely be better to specify that's what it does and have platform tests</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Removing the link tag as the forced condition for the one-time would be a problem for header-based preloads</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Is header Preload in use?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Yes, mostly from HTTP/2 Push</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Simon</b>: On topic of removing resource from Preload cache when you remove &lt;link&gt; element, I know of a pattern &nbsp;where you use rel=preload and you change the rel attribute to stylesheet</span></li><li class="c0 li-bullet-0"><span class="c1">... Shouldn't prune resource immediately</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Do you consider resources not having RT entries a bug? &nbsp;Seems like a bug</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: If we added it, almost all resources would have two RT entries. &nbsp;Due to speculative preloads we don't want two entries at least. &nbsp;For preload as well, I wouldn't consider it a problem. &nbsp;If it was used there was no request going out from renderer</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Bug is that resource cache isn't specified</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: You could end up with a document where it doesn't see any RT entries because of sibling documents. &nbsp;Agree with deduping for some, but maybe not entirely.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Have possibly at least one entry in a document</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: I recently fixed some RT bugs in this area, one of the WPT tests would speculatively parse the HTML it receives and then speculatively fetch script, put in Memory Cache and look at RT data for that</span></li><li class="c0 li-bullet-0"><span class="c1">... I used the RT of the real network fetch, but then if you fetch it again it says 0ms</span></li><li class="c0 li-bullet-0"><span class="c1">... Because it did actually go to the network at some point. &nbsp;But seems like it's not well specified</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Is that Preload or speculative preloading in general</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: Speculative preloading based on HTML parsing</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Thanks for the one-time semantics explanations. I’ll try to specify something in that area that matches what browsers do</span></li><li class="c0 li-bullet-0"><span class="c1">… errors? We can specify that once the rest is specified</span></li><li class="c0 li-bullet-0"><span class="c1">… about HTTP errors, that’d have to be part of the spec</span></li><li class="c0 li-bullet-0"><span class="c1">… IMO, errors should be forwarded</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: you might want to test this. We can render 404 images, if they were actual images. Not sure it’s cached</span></li><li class="c0 li-bullet-0"><span class="c1">… Otherwise, some browsers have XSS checks for some images. Further questions for CSS (e.g. if it doesn’t have the right mime type)</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Simon</b>: For images, per spec it doesn’t put an image in the cache if it’s not a valid image. We’d only cache successful images. Maybe we can change that. Not sure browsers follow that.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: In preload they do, but maybe for 2 out of 3 browsers</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: At least in Firefox preload hooks into existing caching infrastructure, which can explain some observations.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: We should either go resource specific, or go towards a generic cache. It can be resource specific, but we need to specify it.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: There are a couple of types where there’s a spec, but otherwise there isn’t</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Memory Cache distinguishes destinations where HTTP Cache doesn't</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Those are spec'd in Sec-Fetch-Dest?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: HTTP Cache doesn't necessarily Vary on those</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: As part of spec process for Memory Cache we can</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Depends on where cache is placed, if you can get an entry out of it</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: A lot of checks that Memory Cache currently does is to avoid that scenario and we should maintain that property</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: In context of errors, if it's a HTTP error then it's an error, but if the actual resource is an error, we kind of ignore that because not all browsers will parse all resources?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: What we're saying is it might be type specific</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: I think we can specify it can be type-specific but interoperable</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: You would assume script would be pre-parsed across all browsers</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Doesn't have to be preparsed, as long as it's eventually parsed</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Aim to specify the observable behavior is equivalent (network traffic, not perf)</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Simon</b>: And RT API</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Same mixture of preloads and resources should end in same number of resource requests and RT entries</span></li><li class="c0 li-bullet-0"><span class="c1">... Should still cache invalid script with an error</span></li><li class="c0 li-bullet-0"><span class="c1">... With images I think it should be specified</span></li><li class="c0 li-bullet-0"><span class="c1">... Even if an image got a 404, first request going through Preload should get that 404</span></li><li class="c0 li-bullet-0"><span class="c1">... In general if we go with first request thing, if one-shot thing from Preload is available, we just get that response and clear it, everything else separate from this</span></li><li class="c0 li-bullet-0"><span class="c1">... Fetching resource first checks Preload, separate from Resource Cache</span></li><li class="c0 li-bullet-0"><span><b>Noam</b>: Please be involved in GH discussion</span></li></ul><h2 class="c29" id="h.wookayrgz5d3"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1Sk4s3_XLiNBe3A9WDV_w_sHRQK93GteY8mzSTFYQ0Ss/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1637836983436000&amp;usg=AOvVaw0wPoA2wMwAUEf4evKscCvB">Measuring preconnects</a></span><span>&nbsp;- </span><span>Yoav</span><span class="c22">&nbsp;Weiss</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/SZBb6qpK6ew&amp;sa=D&amp;source=editors&amp;ust=1637836983436000&amp;usg=AOvVaw0M5zhoTbv7yjd9mFeljn7P">Recording</a></span></p><h3 class="c2" id="h.8kcibnvozwu2"><span class="c18 c10">Summary</span></h3><ul class="c19 lst-kix_yc033gjmfhsr-0 start"><li class="c0 li-bullet-0"><span class="c1">I outlined the difficulties in knowing if preconnects were helpful</span></li><li class="c0 li-bullet-0"><span class="c1">Folks pointed out that since connections are potentially shared between browsing contexts, the information may not be easy/safe to expose</span></li><li class="c0 li-bullet-0"><span class="c1">Reporting on unused preloads seemed to have more support</span></li></ul><h3 class="c2" id="h.uwpdsfi1dups"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_v5n0rrdj5hvj-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: ResourceTiming gives us a connection time</span></li><li class="c0 li-bullet-0"><span class="c1">... So we can know when a connection was re-used because fetchStart==connectStart==connectEnd</span></li><li class="c0 li-bullet-0"><span class="c1">... Know whether resource was pre-connected</span></li><li class="c0 li-bullet-0"><span class="c1">.. Can't distinguish between implicit preconnects (knows things about user), explicitly preconnets (tags), or re-used persistent connections</span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 608.00px;<b> height</b>: 328.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(15).png" style="width: 608.00px;<b> height</b>: 328.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-0"><li class="c0 li-bullet-0"><span class="c1">... We don't know when they happen?</span></li><li class="c0 li-bullet-0"><span class="c1">... We don't know if they were useful?</span></li><li class="c0 li-bullet-0"><span class="c1">... Implicit preconnects</span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 314.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(16).png" style="width: 624.00px;<b> height</b>: 314.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-0"><li class="c0 li-bullet-0"><span class="c1">... Reused persistent connections</span></li><li class="c0 li-bullet-0"><span class="c1">... Explicit preconnects is &lt;link rel=preconnect&gt;</span></li><li class="c0 li-bullet-0"><span class="c1">... Opened issue many years ago about RT and preconnect</span></li><li class="c0 li-bullet-0"><span class="c1">... Recently more relevant with Early Hints</span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 353.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(17).png" style="width: 624.00px;<b> height</b>: 353.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-0"><li class="c0 li-bullet-0"><span class="c1">... Early Hints allow server to send HTTP response headers via 103 Early Hints status before it gets the rest of the content / original hints</span></li><li class="c0 li-bullet-0"><span class="c1">... Preload or Preconnect headers use-case</span></li><li class="c0 li-bullet-0"><span class="c1">... For Preloads, we can estimate those were useful via RT API. &nbsp;But for Preconnects we don't know if the connection happened due to Early Hint and wasn't available before</span></li><li class="c0 li-bullet-0"><span class="c1">... A few options for how we could distinguish</span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 519.00px;<b> height</b>: 197.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(18).png" style="width: 519.00px;<b> height</b>: 197.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-0"><li class="c0 li-bullet-0"><span>... </span><span class="c13">When</span><span class="c1">&nbsp;did preconnects happen? &nbsp;vs. the fact that it did happen</span></li><li class="c0 li-bullet-0"><span class="c1">... Finding useless preconnects</span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-1 start"><li class="c11 c21 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 566.00px;<b> height</b>: 182.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(19).png" style="width: 566.00px;<b> height</b>: 182.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c19 lst-kix_v5n0rrdj5hvj-0"><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Unless you're assuming network partitioning on a per-doc basis, the connection pools don't belong to any document. &nbsp;Two tabs open, one could be creating connections for the other one. &nbsp;I don't know you want to leak that info unless it was a request on that document creating it</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Should be partitioned for all top-level same-site</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Connection pools are partitioned, but you concern is valid</span></li><li class="c0 li-bullet-0"><span class="c1">... If top level site A, and a embeds B, A shouldn't be able to detect if it's a reused connection</span></li><li class="c0 li-bullet-0"><span class="c1">... At some point there will be leaks because there's not a key for the whole chain</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Saying if A embeds B, B loads a resource from C, and A loads C it can see if there's an information leak</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Is it not enough if you're doing &nbsp;Early Hints trial from Preconnect, and you see the B fork of trial that it spends N% of time less in connections?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: What I hear from field is that it's hard to tell those scenarios apart</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: If it's not having an effect though?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: If you have a very low data volume on some origins, hard to tell whether it theoretically worked or not</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Being reporting on unused Preloads would be much more important than unused Preconnects, consequences much more severe</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Assuming Preload is document scoped, you fire off a report</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andy</b>: When I've used Preconnect we just look at the effect on the 3P that we're connecting to (e.g. Cookie Consent banner). &nbsp;Measure something that matters.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Way that you should look is the reverse, if you added Preconnect and it helped. &nbsp;Then you make changes in code and it no longer helps but nobody checks anymore. &nbsp;All those marketing pixels that live forever.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Going back to the useless Preconnect case, I take your point that you can't expose that cross-origin iframe, but that's not the only case for Preconnects. &nbsp;Any objections to preconnects the same origin triggered, or that didn't use? &nbsp;Hard, I have to think about it more.</span></li></ul><h2 class="c29" id="h.f3rar6xwkzgu"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1YhipvqyWYuYFxN3T0cLGsmXKMXUssdv_CM-4hwnjy0s/edit%23slide%3Did.gfb1a0287e1_0_1&amp;sa=D&amp;source=editors&amp;ust=1637836983442000&amp;usg=AOvVaw19RDKUKuqFzqlP6Mku7J6t">BFCache</a></span><span>&nbsp;- </span><span>Fergal Daly</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/ljdvpYtgN7E&amp;sa=D&amp;source=editors&amp;ust=1637836983443000&amp;usg=AOvVaw0FXytUxKUpG0dYdJ4iYkQR">Recording</a></span></p><h3 class="c2" id="h.mo0swzgvknmp"><span>Summary</span></h3><ul class="c19 lst-kix_47wnqvlrxwjs-0 start"><li class="c0 li-bullet-0"><span class="c1">Chrome, Firefox and Safari now support back/forward cache. Chrome is working on increasing its hit-rate. RUM vendors can help by exposing BFCache hit-rates in dashboards (some already are).</span></li><li class="c0 li-bullet-0"><span>We would also like to expose the reason for cache misses (e.g. holding a WebLock). Proposing an </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/rubberyuzu/bfcache-not-retored-reason/blob/main/NotRestoredReason.md&amp;sa=D&amp;source=editors&amp;ust=1637836983445000&amp;usg=AOvVaw0OQMtkYMQPn0hfAkQ974t1">API</a></span><span class="c1">&nbsp;for this and would like feedback (seems like exposing via PerformanceTimeline is favoured in this session). Already exposing reasons in DevTools.</span></li><li class="c0 li-bullet-0"><span class="c1">Unload is a big blocker on desktop for Chrome and Firefox (Safari ignores it) and problematic legacy API in general. We want people to use pagehide, visibilitychange or others like upcoming beacon-API, (sorry no link yet). Chrome is doing outreach and exposing in lighthouse.</span></li><li class="c0 li-bullet-0"><span class="c1">Feedback is that customers don't get "BFCache", maybe another name would help.</span></li></ul><h3 class="c2" id="h.w6dyk5hue347"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_5fhkllpes9k2-0 start"><li class="c0 li-bullet-0"><span><b>Fergal</b>: Team effort - </span><span class="c4"><a class="c8" href="mailto:bfcache-dev@chromium.org">bfcache-dev@chromium.org</a></span></li><li class="c0 li-bullet-0"><span class="c1">… quick summary of BFCache.</span></li><li class="c0 li-bullet-0"><span class="c1">… Firefox and Safari have them for a while, Chrome recently added</span></li><li class="c0 li-bullet-0"><span class="c1">… Navigating away from a page discards the objects created. With BFCache the page is paused, and can be resumed without re-parsing</span></li><li class="c0 li-bullet-0"><span class="c1">… Makes history navigation instant (for the most part)</span></li><li class="c0 li-bullet-0"><span class="c1">… See 10-35% of history navigations served from the BFcache, aiming for 50% next year.</span></li><li class="c0 li-bullet-0"><span class="c1">… Have requests for RUM folks. Would be great those metrics included BFCache hit rates for the sites in question</span></li><li class="c0 li-bullet-0"><span class="c1">… Would be great if dashboards tell people what’s causing their sites to miss BFCache</span></li><li class="c0 li-bullet-0"><span class="c1">… and would be great to move off of unload events</span></li><li class="c0 li-bullet-0"><span class="c1">… Need more awareness - many developers are unaware of it</span></li><li class="c0 li-bullet-0"><span class="c1">… e.g. Wikipedia fixed it quickly once they were aware of them</span></li><li class="c0 li-bullet-0"><span class="c1">… If you’re brought back from BFCache, the event has a persisted bit that’s true</span></li><li class="c0 li-bullet-0"><span class="c1">… Can divide that by navigation entries with a “back_forward” type</span></li><li class="c0 li-bullet-0"><span class="c1">…&lt; Insert code example here&gt;</span></li><li class="c0 li-bullet-0"><span class="c1">… Lots of reasons why you’d be blocked from BFCache</span></li><li class="c0 li-bullet-0"><span class="c1">… Chrome initially blocked everything that could’ve been problematic and now working on unblocking those</span></li><li class="c0 li-bullet-0"><span class="c1">… Example - cache-control: no-store</span></li><li class="c0 li-bullet-0"><span class="c1">… If you hold a weblock it’s difficult to put you in BFCache, we’d have to let other folks take it and kick you out</span></li><li class="c0 li-bullet-0"><span class="c1">… Other features as well result in blocking</span></li><li class="c0 li-bullet-0"><span class="c1">… Pages can see that, handle it properly in pagehide, and be able to go into the BFCache</span></li><li class="c0 li-bullet-0"><span class="c1">… Explainer on an API that would give you the reasons for why you didn’t make it into the BFCache</span></li><li class="c0 li-bullet-0"><span>… </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/rubberyuzu/bfcache-not-retored-reason/blob/main/NotRestoredReason.md&amp;sa=D&amp;source=editors&amp;ust=1637836983449000&amp;usg=AOvVaw0uCh6QakSVpBMCJ5jTifI1">https://github.com/rubberyuzu/bfcache-not-retored-reason/blob/main/NotRestoredReason.md</a></span><span class="c1">&nbsp;</span></li><li class="c0 li-bullet-0"><span class="c1">… Give you frame URL, and reasons when possible (i.e. when not cross-origin)</span></li><li class="c0 li-bullet-0"><span class="c1">.. Would like feedback on the shape of the API</span></li><li class="c0 li-bullet-0"><span class="c1">… Could attach it to PageShow, NavigationTiming or Reporting API.</span></li><li class="c0 li-bullet-0"><span class="c1">… Would love feedback on the GH issue</span></li><li class="c0 li-bullet-0"><span class="c1">… Would like to enable sites to drive their cache hit rates</span></li><li class="c0 li-bullet-0"><span class="c1">… DevTools show such reasons, but that’s limited</span></li><li class="c0 li-bullet-0"><span class="c1">… We also want to ask people to stop using unload</span></li><li class="c0 li-bullet-0"><span class="c1">… Android ignores unload for BFCached pages</span></li><li class="c0 li-bullet-0"><span class="c1">… Safari is the same</span></li><li class="c0 li-bullet-0"><span class="c1">… Chrome desktop cannot do the same, but it is the largest BFCache blocker</span></li><li class="c0 li-bullet-0"><span class="c1">… You can change unload usage to pagehide usage typically. PageHide is more reliable</span></li><li class="c0 li-bullet-0"><span class="c1">… You can also tell apart PageHide that goes into BFCache</span></li><li class="c0 li-bullet-0"><span class="c1">… Sometimes VisibilityChange can be a good replacement.</span></li><li class="c0 li-bullet-0"><span class="c1">… If you have unload use-cases that are not replaceable, please reach out.</span></li><li class="c0 li-bullet-0"><span class="c1">… Orthogonal, but there’s a proposal for a beacon API that delivers information after the page is discarded regardless of reason</span></li><li class="c0 li-bullet-0"><span class="c1">… Almost every usage of unload can be replaced by PageHide, but it’s still not 100% reliable, and there’s no “last PageHide”, so hard to send a final beacon from the page.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Thanks! Definitely something that we are planning to support in our dashboard. Glad you’re thinking about attribution when things don’t work out. Have to think through about the best delivery mechanism. Generally favor PerformanceTimeline.</span></li><li class="c0 li-bullet-0"><span class="c1">… BFCache itself is a mouthful and we’re not sure how to explain that. Maybe as a community we can figure out a better name? Common terminology?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Olli</b>: Blazingly-Fast cache, originally</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: We already collect this info, exposed to us rather than to users, as they can’t disable it. Did the work of removing the unload event. Collect the data of when a BFCache occurs.</span></li><li class="c0 li-bullet-0"><span class="c1">… We don’t normally look at those numbers. The motivation to collect it was to get the best performance possible and avoid interference with CWVs.</span></li><li class="c0 li-bullet-0"><span class="c1">… We don’t actually get BFCache for Chrome, because we use WebWorkers for most of our sessions.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Fergal</b>: Working on dedicated workers support</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Performance timeline may not be available at the time of the page unloading for RUM scripts?</span></li><li class="c0 li-bullet-0"><span><b>Fergal</b>: Data should be available to a page that </span><span class="c45">wasn't</span><span class="c1">&nbsp;able to BFCache when the page comes back in at the pageshow event, so the RUM script should be there</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: As a RUM provider, we’re excited about exposing more navigation types as dimensions. Similarly excited about attribution</span></li><li class="c0 li-bullet-0"><span class="c1">… How we talk about BFCache is important, as we have more non-technical folks. So language is important. Worthy a discussion. +1 on PerformanceTimeline</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Suggestion to create an issue on naming suggestions. Nic to take AI</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: We’ve been measuring and trying to increase BFCache use, so interested in this direction. Recently renamed it from PageCache to BFCache</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Olli</b>: How to deal with cross-origin iframes? E.g. youtube widgets</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Fergal</b>: When an iframe is blocked and its cross-origin is blocked. You don’t know what URL it was. But if you added it to your page, you should know what that widget is and where it came from.</span></li><li class="c0 li-bullet-0"><span class="c1">… Looking at logs we’re trying to find the worst offenders and get them to remove their unload handlers.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Ian</b>: Wanted to talk about the reporting API. I know Firefox and Safari made some work on that, and we could use the infrastructure to report BFCache related info.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Fergal</b>: If there are problems in the explainer with the ReportingAPI, let us know.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Ian</b>: Example is not bad, but would require the code to run in the page.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Fergal</b>: I’ll add a note about reporting to the explainer.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Interested in Reporting API and Observer. We have a behind a flag implementation for both. Only integrated with CSP, need another feature to justify shipping it.</span></li><li class="c0 li-bullet-0"><span class="c1">… We’re still supportive of the API once there’s justification.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Steven</b>: Where in devtools can you see BFCache misses?</span></li><li class="c0 li-bullet-0"><span><b>Fergal</b>: </span><span>shipping in Chrome 95. Under “application”</span></li></ul><h2 class="c29" id="h.n3yvkdpnm2i"><span class="c22">PageVisibility and requestIdleCallback - Noam Rosenthal </span></h2><h3 class="c2" id="h.ojek6v7rqpi3"><span class="c18 c10">Summary</span></h3><ul class="c19 lst-kix_z1654lrb42kb-0 start"><li class="c0 li-bullet-0"><span class="c1">PageVisibility and requestIdleCallback are slowly folding their content into the HTML spec.</span></li><li class="c0 li-bullet-0"><span class="c1">It was agreed that PageVisibility can be folded entirely (which has since happened), and that requestIdleCallback would fold only the deadline algorithm for now.</span></li><li class="c0 li-bullet-0"><span>Regarding the future of requestIdleCallback, some request was made to </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/w3c/requestidlecallback/issues/97&amp;sa=D&amp;source=editors&amp;ust=1637836983456000&amp;usg=AOvVaw2ajVq0YNzm-19A1XMTw2ZL">expose some of the deadline information outside the context of the idle period deadline</a></span><span class="c1">.</span></li></ul><h3 class="c2" id="h.iq5m4muut2v"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_x0h22t9m68z6-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Discussion topic, not presentation</span></li><li class="c0 li-bullet-0"><span class="c1">… In my work I'm going through a lot of WebPerf specs, cleaning up old issues</span></li><li class="c0 li-bullet-0"><span class="c1">... Cleaning up technical debt</span></li><li class="c0 li-bullet-0"><span class="c1">... Common thread of what I'm doing is moving things into Fetch and HTML</span></li><li class="c0 li-bullet-0"><span class="c1">... Last year moved from ResourceTiming and NavigationTiming into Fetch and HTML</span></li><li class="c0 li-bullet-0"><span class="c1">... This year, same thing but also getting into smaller specs</span></li><li class="c0 li-bullet-0"><span class="c1">... Recent PRs they're very close to removing the entire spec into HTML</span></li><li class="c0 li-bullet-0"><span>... pageVisibility PR </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/whatwg/html/pull/7238&amp;sa=D&amp;source=editors&amp;ust=1637836983457000&amp;usg=AOvVaw0s7Sxh2XuJa9Vcd8DyNlRg">https://github.com/whatwg/html/pull/7238</a></span></li><li class="c0 li-bullet-0"><span class="c1">... Defines event, states, hidden, etc in HTML</span></li><li class="c0 li-bullet-0"><span class="c1">... Makes pageVisibility spec itself not have anything but prose (that could be transferred to HTML spec)</span></li><li class="c0 li-bullet-0"><span>... Same for requestIdleCallback </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/whatwg/html/pull/7166&amp;sa=D&amp;source=editors&amp;ust=1637836983458000&amp;usg=AOvVaw0O6l4fuSWkGcA_tP5clR49">https://github.com/whatwg/html/pull/7166</a></span><span class="c1">&nbsp;</span></li><li class="c0 li-bullet-0"><span class="c1">... Attempts to define what "deadline" means, which is a bit hand-way today</span></li><li class="c0 li-bullet-0"><span class="c1">... Defines an event loop terms, and testable terms</span></li><li class="c0 li-bullet-0"><span class="c1">... A lot of the rIC spec is about that</span></li><li class="c0 li-bullet-0"><span class="c1">... Issues in the rIC repo are about the deadline not being well defined</span></li><li class="c0 li-bullet-0"><span class="c1">... Some of this takes the "hook" concepts in PageVis spec, which other things can call</span></li><li class="c0 li-bullet-0"><span class="c1">... Why not just call them one-by-one and we can call them in order</span></li><li class="c0 li-bullet-0"><span class="c1">... Making it more predictable and clear is a big Pro</span></li><li class="c0 li-bullet-0"><span class="c1">... One con of putting things in HTML spec. &nbsp;I'm a member of W3C and WHATWG, not sure if everyone else is</span></li><li class="c0 li-bullet-0"><span class="c1">... In general there are fewer reviewers available in HTML specs</span></li><li class="c0 li-bullet-0"><span class="c1">... However it's a different process than working with W3C specs that may feel more experimental, the process can go faster for better or worse</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: From my perspective I think that it makes sense for these two specs to be better aligned with HTML. &nbsp;The PRs that I looked at make general sense and agreed that they don't leave a lot beyond setting up the context in those documents</span></li><li class="c0 li-bullet-0"><span class="c1">... Those two specs define bits whose processing is outside of HTML</span></li><li class="c0 li-bullet-0"><span class="c1">... Makes sense for those two specs to move</span></li><li class="c0 li-bullet-0"><span class="c1">... Unless there's a specific reason why we shouldn't</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: My only concern for Page Visibility is if we ever decided to expose additional information via the Observer that we have discussed in the past, we'd have to revive the spec we just killed.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Or another Visibility Observer we'd have to add that to the charter</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: Regarding rIC I'm not super familiar with it, not sure if there are any intended additions to it</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Spec editing situation there is complex, no longer involved</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: We have plans to keep working ins scheduling space, but not necessarily rIC</span></li><li class="c0 li-bullet-0"><span class="c1">... Taking over editor and ramping up on it</span></li><li class="c0 li-bullet-0"><span class="c1">... I think it does make sense in HTML, given how integrated it is, no objections at this point</span></li><li class="c0 li-bullet-0"><span class="c1">... If we did have to expand on it for any reason, we could do a PR to HTML, or try to monkey patch it through a different spec</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Wanted to suggest - some of these specs are tiny, it may be better to arrange specs per subject rather than function</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: This is what we’re doing with the Scheduling APIs. One option would be to move that processing to the scheduling APIs spec. It’s similar event loop modifications, but maybe it should be in HTML</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Makes sense to have the event loop modifications be part of HTML and keep the web exposed bit in W3C</span></li><li class="c0 li-bullet-0"><span class="c1">… If anyone is interested in the deadline discussion, it felt that no one is extremely familiar with it.</span></li><li class="c0 li-bullet-0"><span class="c1">… A deadline is when you get an idle callback you get a number of seconds you have for “idleness”. May make sense to see if people are using it in a meaningful way.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Olli</b>: Have you compared how different browsers implement it?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Added WPTs, and based on the definition, browsers handle it differently. Not super different.</span></li><li class="c0 li-bullet-0"><span class="c1">… Nice to work on it, as it required a lot of timer revamp in HTML, and now it’s better defined.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Philip</b>: I used that deadline in the past in code. At the time, it was only implemented in Chrome. I avoided running the cleanup code if the idle time was lower than 16. Not the most useful signal, but nice to know what idle period I was in.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Might be more explicit to just expose that: is there a pending render opportunity</span></li><li class="c0 li-bullet-0"><span class="c1">… That’s how the deadline logic is implemented.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Olli</b>: Not quite true in Firefox. We can create new rendering opportunities as needed to improve performance</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamR</b>: best guess</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: Using it as a heuristic to execute expensive/blocking tasks. A better approach for the render opportunity is the isRenderPending.</span></li><li class="c0 li-bullet-0"><span class="c1">… We do use the deadline and skip tasks when there’s no time</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: isFramePending is useful outside of rIC, so it largely takes care of that use case. Deadline also takes into account pending timers.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Those are the 3 things that can effect it: timers, rendering opportunity, 50ms timeout.</span></li><li class="c0 li-bullet-0"><span class="c1">… Can be useful generally</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: People also ask for deadlines outside of rIC as a useful signal</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: We have devices with variable framerates that can be greater than 60 FPS, so don’t want to encourage the web to be locked into 60 FPS.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: This is where deadline fails. It’s heuristics based on assumptions, rather than providing the signals directly. Libraries could then do that for people.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: Followup to Alex’s comment. What’s running on that frame? Hard to know ahead of time, but maybe you could use past info to predict the future.</span></li><li class="c0 li-bullet-0"><span class="c1">… Skipping a main frame update is not equally bad in all situations.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: I’ll open an issue to consider exposing direct signals instead of deadline heuristics.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Just wanted to say that I’m hard-pressed to think of a really good use-case for rIC, and it’s starting to see it as an anti-pattern. So maybe it's not worth investing in it. </span></li><li class="c0 li-bullet-0"><span class="c1"><b>Philip</b>: To clarify, I was looking for a dedicated scheduling API, to fire low priority tasks. Could be a better API to better handle that use case.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: In the same sense, having a signal of how much time you have remaining, enables you to split you tasks.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: If it’s a DOM related task it shouldn’t be in rIC</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: Render less important aspects of the UI (generate HTML using React). You could consider doing that in a worker, but there are tradeoffs.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: That’s the part we need to fix.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Moving things over may also depend on ability to discuss WHATWG things</span></li><li class="c0 li-bullet-0"><span class="c1">&lt;TODO&gt; conclusions</span></li></ul><h2 class="c29" id="h.aoc5woaj7n42"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/153_ZoUqWNgyNL9tRi2N08-KheF9XCG4sjhZJXhUsUdU/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1637836983464000&amp;usg=AOvVaw1Ea3Y-C77Jd7G9UpQ9_a6c">RUM pain points - </a></span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/153_ZoUqWNgyNL9tRi2N08-KheF9XCG4sjhZJXhUsUdU/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1637836983465000&amp;usg=AOvVaw39GdyZGAPTenInZHLweP5f">Nic</a></span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/153_ZoUqWNgyNL9tRi2N08-KheF9XCG4sjhZJXhUsUdU/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1637836983465000&amp;usg=AOvVaw39GdyZGAPTenInZHLweP5f">&nbsp;Jansma</a></span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/zWnortGgXTU&amp;sa=D&amp;source=editors&amp;ust=1637836983465000&amp;usg=AOvVaw00MSntjVYjaalTs4OhkO-u">Recording</a></span></p><h3 class="c2" id="h.jfumkfcw2alx"><span class="c18 c10">Summary</span></h3><ul class="c19 lst-kix_c8i4jrv36f65-0 start"><li class="c0 li-bullet-0"><span class="c1">Discussed what "ideal" RUM API characteristics are, including being able to look-back into history and having enough attribution to be able to affect the metric</span></li><li class="c0 li-bullet-0"><span class="c1">RUM needs around more SPA support, better ResourceTiming visibility, observing cross-origin frames, and other resource characteristics</span></li><li class="c0 li-bullet-0"><span class="c1">Would like to see a more reliably mechanism for ensuring beacons are sent (beyond Beacon API), maybe through Reporting API</span></li><li class="c0 li-bullet-0"><span class="c1">Echos of support from other RUM vendors and companies using RUM for their own analytics</span></li></ul><h3 class="c2" id="h.nuqctvjkndn9"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_rkobndvsr1ef-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Wanted to talk about RUM pain points from my point of view, influenced by feedback from SpeedCurve and Pinterest</span></li><li class="c0 li-bullet-0"><span class="c1">… Ideal RUM APIs</span></li><li class="c0 li-bullet-0"><span class="c1">… Prefer APIs that can look back into history - performance timeline or perfObserver with a buffered flag.</span></li><li class="c0 li-bullet-0"><span class="c1">… even if your library wasn’t on when the event happened, you can collect it later</span></li><li class="c0 li-bullet-0"><span class="c1">… As a 3P provider, we sometimes load late, and such APIs are critical</span></li><li class="c0 li-bullet-0"><span class="c1">… Attribution is key</span></li><li class="c0 li-bullet-0"><span class="c1">… We’ve been getting better with that. In previous discussion with Fergal we discussed BFCache attribution, which is great</span></li><li class="c0 li-bullet-0"><span class="c1">… SPA support - designing APIs with SPA support in mind. Some of the current APIs don’t work great with SPA, e.g. LCP</span></li><li class="c0 li-bullet-0"><span class="c1">… Want to see RUM loading improve. We’re using a loading snippet that’s 2.5K</span></li><li class="c0 li-bullet-0"><span class="c1">… Put this junk in the pageload to avoid affecting onload performance.</span></li><li class="c0 li-bullet-0"><span class="c1">… Can run scripts at onload and have visual indicators</span></li><li class="c0 li-bullet-0"><span class="c1">… So jump through hoops to avoid it. Async and defer are blocking onload.</span></li><li class="c0 li-bullet-0"><span class="c1">… There is a possible solution in resource loading orchestration, where there are different hints to load scripts at different stages</span></li><li class="c0 li-bullet-0"><span class="c1">… When RUM measures something people ask “why” and “how to fix it”</span></li><li class="c0 li-bullet-0"><span class="c1">… LCP.element and CLS.sources are great examples for attribution out the gate</span></li><li class="c0 li-bullet-0"><span class="c1">… LongTasks are the flip side. They have no attribution detail which helps find the source.</span></li><li class="c0 li-bullet-0"><span class="c1">… In a modern website you have so many dependencies that current attribution doesn’t help</span></li><li class="c0 li-bullet-0"><span class="c1">… Pinterest wanted to do better root cause analysis, and knowing the trigger would really help</span></li><li class="c0 li-bullet-0"><span class="c1">… JS self profiling could help, but it’s a sampling API so it may not help in all cases.</span></li><li class="c0 li-bullet-0"><span class="c1">… Last year we had a great presentation from Patrick Hulce on that front.</span></li><li class="c0 li-bullet-0"><span class="c1">… SPAs - affect nearly every RUM metric</span></li><li class="c0 li-bullet-0"><span class="c1">… Many metrics are irrelevant</span></li><li class="c0 li-bullet-0"><span class="c1">… You have to think about how they affect an SPA</span></li><li class="c0 li-bullet-0"><span class="c1">… In mPulse we have an “are you an SPA” boolean that then measures different things</span></li><li class="c0 li-bullet-0"><span class="c1">… AppHistory can help, but for Soft navigation, we can hook into some events to know when it starts</span></li><li class="c0 li-bullet-0"><span class="c1">… But we don’t know when it ends</span></li><li class="c0 li-bullet-0"><span class="c1">… We listen to mutation observer, patch Fetch, and doing a lot of work that we’d love for the browser to help us do better.</span></li><li class="c0 li-bullet-0"><span class="c1">… For MPAs, the page is loaded once the onload fired. For SPAs onload doesn’t matter</span></li><li class="c0 li-bullet-0"><span class="c1">… We’re definitely talking more about SPAs, but we’re not yet there.</span></li><li class="c0 li-bullet-0"><span class="c1">… e.g. LCP needs a reset</span></li><li class="c0 li-bullet-0"><span class="c1">… on the other hand, CLS does work well with SPAs, because you have all the events to slices them as you want</span></li><li class="c0 li-bullet-0"><span class="c1">… So need to focus on new APIs supporting SPAs</span></li><li class="c0 li-bullet-0"><span class="c1">… Network visibility - some proposals but no solutions</span></li><li class="c0 li-bullet-0"><span class="c1">… If you measure resources, all cross-origin iframe resources are not visible, which constitute 30% of hits and 50% of bytes.</span></li><li class="c0 li-bullet-0"><span class="c1">… So we show customers waterfalls, but they are incomplete</span></li><li class="c0 li-bullet-0"><span class="c1">… Particularly painful for ads</span></li><li class="c0 li-bullet-0"><span class="c1">… Also for CLS, visible in devtools but cross-iframe CLS is invisible to RUM</span></li><li class="c0 li-bullet-0"><span class="c1">… Proposal for a “bubbles” API to bubble up resource entries to the top-level document, and cross-origin iframes can opt-in to share that data.</span></li><li class="c0 li-bullet-0"><span class="c1">… Observing when network requests start</span></li><li class="c0 li-bullet-0"><span class="c1">… Enables SPA monitoring. Currently patch Fetch and XHR. Otherwise incomplete, and makes it hard to calculate network idleness.</span></li><li class="c0 li-bullet-0"><span class="c1">… Ongoing work on Fetch+SW integration - better cache hit rate reporting would help Pinterest</span></li><li class="c0 li-bullet-0"><span class="c1">… More information not exposed for resources›</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 418.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-26 at 18.23.14.png" style="width: 624.00px;<b> height</b>: 418.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">… No consistency on non-200 responses. Want more visibility into that</span></li><li class="c0 li-bullet-0"><span class="c1">… Worthwhile to continue past discussion on TAO and relationship with CORS</span></li><li class="c0 li-bullet-0"><span class="c1">… Last thing: reporting API</span></li><li class="c0 li-bullet-0"><span class="c1">… Browser extensions polluting data</span></li><li class="c0 li-bullet-0"><span class="c1">… Would love to tag on metadata</span></li><li class="c0 li-bullet-0"><span class="c1">… Today the only way is through the URL</span></li><li class="c0 li-bullet-0"><span class="c1">… would be useful to add session ID, session length during the lifetime of the page</span></li><li class="c0 li-bullet-0"><span class="c1">… May have privacy and security implications</span></li><li class="c0 li-bullet-0"><span class="c1">… Was a presentation to use reporting as a more reliable beaconing mechanism</span></li><li class="c0 li-bullet-0"><span class="c1">… mPulse sends beacons when the page loads, because it’s most reliable. Would like to send it later, to enable more data. There are some downsides to sending 2 beacons.</span></li><li class="c0 li-bullet-0"><span class="c1">… Some customers send it later, but there’s a reliability cost</span></li><li class="c0 li-bullet-0"><span class="c1">… Lost beacons means losing experiences</span></li><li class="c0 li-bullet-0"><span class="c1">… For some customers that’s a good tradeoff, but an API that would fix that tradeoff would be helpful.</span></li><li class="c0 li-bullet-0"><span class="c1">… Thanks for SpeedCurve and Pinterest for their ideas.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Katie</b>: Wanted to say +100000 to all of that. Owns and maintains internal RUM. Same issue. We do all kinds of wild stuff to work around that.</span></li><li class="c0 li-bullet-0"><span class="c1">… A couple of years ago we moved our JS build system, and when they tried to launch their perf monitoring went off the chart.</span></li><li class="c0 li-bullet-0"><span class="c1">… Grouping the perf monitoring bundle ith the JS, so performance changes changed when perf monitoring ran</span></li><li class="c0 li-bullet-0"><span class="c1">… Ended up inlining that code to avoid variation</span></li><li class="c0 li-bullet-0"><span class="c1">… We see this when running the monitoring code on the same thread, changes result in impact on the measurement.</span></li><li class="c0 li-bullet-0"><span class="c1">… Big problem overall: attribution, SPAs</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: Curious - are your customers interested in hang detection - when the page blocks.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Yeah and the reporting API crash reporting is great. A freezing API would be a good fit as well.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: We’re exploring similar ideas</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Olli</b>: In slide 2 you mentioned looking back in history. Need to be careful. E.g. last year a social media site used a buffer size of 100000, which resulted in huge memory bloat.</span></li><li class="c0 li-bullet-0"><span class="c1">… Maybe the APIs should be designed to prevent such misuse</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: ResourceTiming has explicit control over the buffer. PerfObserver doesn’t allow infinite buffer size</span></li><li class="c0 li-bullet-0"><span class="c1">… We have a doc that suggests recommended buffer size for implementations.</span></li><li class="c0 li-bullet-0"><span class="c1">… Definitely a tradeoff there.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: At Wix we also use inhouse perf monitoring. Definitely echo everything you said on attribution, despite controlled env. With regard to SPAs, what you do with CLS creates some discrepancy between how you measure CLS and how CrUX measures CLS. We decided to align with CrUX because that’s what users see.</span></li><li class="c0 li-bullet-0"><span class="c1">… What do you think about integration with privacy cookie banners, consent, etc?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: We indeed report a different metric from CrUX. Customers use both data points.</span></li><li class="c0 li-bullet-0"><span class="c1">… CLS sessions is a great way to think of this, and points out the worst layout experiences.</span></li><li class="c0 li-bullet-0"><span class="c1">… Otherwise, we have some customers that try to measure the effect of privacy banners, etc. Still at early stages.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Wasn’t asking about the banner’s perf implications, but about the consent policy itself. Avoid reporting things, etc.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Gave customers the choice and it depends on their policies.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: On the LCP issue, is there an open issue on that?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: There’s an open issue to reset LCP.</span></li></ul><h2 class="c29" id="h.ufhevfsm67u5"><span>Measuring SPAs - </span><span>Yoav Weiss</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/BCecoQYYuZY&amp;sa=D&amp;source=editors&amp;ust=1637836983476000&amp;usg=AOvVaw3ZXJFxk4FbVxAUyyno3vYb">Recording</a></span></p><h3 class="c2" id="h.tu6l1ol2nk5"><span class="c18 c10">Summary</span></h3><ul class="c19 lst-kix_xushg9nfvd-0 start"><li class="c0 li-bullet-0"><span class="c1">Outlined a path to reporting soft navigation in RUM APIs, including related paint timings.</span></li><li class="c0 li-bullet-0"><span class="c1">There was interest in that happening, but also in a “Paint Timing reset” API</span></li><li class="c0 li-bullet-0"><span class="c1">We should be careful not to take the first paint after a navigation (e.g. button color change, spinner) as *the* FCP.</span></li></ul><h3 class="c2" id="h.10efh83s2dnd"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_yqf5qsmroeu7-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Soft navigations are hard</span></li><li class="c0 li-bullet-0"><span class="c1">... aka same-document navigation</span></li><li class="c0 li-bullet-0"><span class="c1">... with History API, user typically clicks on something, fetches content, history.pushState(), DOM modifications</span></li><li class="c0 li-bullet-0"><span class="c1">... AppHistory API proposal, user-initiated link or "appHistory.navigte()" API and "navigate" event</span></li><li class="c0 li-bullet-0"><span class="c1">... transitionWhile() with a Promise that fetches content and modifies DOM</span></li><li class="c0 li-bullet-0"><span class="c1">... What's hard? There's no clear start point (History API model)</span></li><li class="c0 li-bullet-0"><span class="c1">... Don't know when navigation has started, hard to link to user click event</span></li><li class="c0 li-bullet-0"><span class="c1">... Hard to distinguish URL-changing interactions from soft navigations</span></li><li class="c0 li-bullet-0"><span class="c1">... No correlation to paint events that happen afterwards to soft nav itself</span></li><li class="c0 li-bullet-0"><span class="c1">... Paints may happen after nav but may not be related to nav work itself</span></li><li class="c0 li-bullet-0"><span class="c1">... No clear starting point: App History came up with "user initiated navigation" (anchor or form)</span></li><li class="c0 li-bullet-0"><span class="c1">... Interactions vs. navigation: detect &lt;main&gt; paints? &nbsp;% of screen painted?</span></li><li class="c0 li-bullet-0"><span class="c1">... What happens when main element is on a small part of the screen? Mis-incentivising</span></li><li class="c0 li-bullet-0"><span class="c1">... Maybe we can filter interactions based on past hard navigation</span></li><li class="c0 li-bullet-0"><span class="c1">... Paint correlation - same as responsiveness</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 310.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(20).png" style="width: 624.00px;<b> height</b>: 310.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Exact same problem we have for soft navs we have for responsiveness, we don't know next frame is related to that user action</span></li><li class="c0 li-bullet-0"><span class="c1">... Potentially async work that can happen and need to be completed before related frame is presented on screen</span></li><li class="c0 li-bullet-0"><span class="c1">... AppHistory - limit tracking to promise chains</span></li><li class="c0 li-bullet-0"><span class="c1">... Any promise that dirties the DOM and is paint causing, we can track back to navigation</span></li><li class="c0 li-bullet-0"><span class="c1">... Promise Hooks, V8 internal API, an option but has performance implications</span></li><li class="c0 li-bullet-0"><span class="c1">... Look at tracking tasks from render side</span></li><li class="c0 li-bullet-0"><span class="c1">... &lt;demo!&gt;</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 576.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(21).png" style="width: 624.00px;<b> height</b>: 576.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 526.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(22).png" style="width: 624.00px;<b> height</b>: 526.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... On AppHistory demo page, you can see navigation and task that resulted in a layout operation</span></li><li class="c0 li-bullet-0"><span class="c1">... Essentially I think that it's far from done and there's still a bunch of problems, e.g. prototype doesn't handle userland promises</span></li><li class="c0 li-bullet-0"><span class="c1">... Path between navigation or click events and the DOM operations that result</span></li><li class="c0 li-bullet-0"><span class="c1">... We may not have to rely on AppHistory, although alignment could be nice</span></li><li class="c0 li-bullet-0"><span class="c1">... Responsiveness could use same mechanism</span></li><li class="c0 li-bullet-0"><span class="c1">... Maybe this has effects on LongTask attribution</span></li><li class="c0 li-bullet-0"><span class="c1">... Caveats: Cannot track all tasks, e.g. data queues</span></li><li class="c0 li-bullet-0"><span class="c1">... If people are putting data into a queue and getting it later, we don't have a way to correlate and say these tasks are a continuation of one another</span></li><li class="c0 li-bullet-0"><span class="c1">... I think from a navigation perspective this is fine</span></li><li class="c0 li-bullet-0"><span class="c1">... We can essentially tell developers that if they want to be able to track soft navigation, this is not something they should be doing as part of their navigation flow.</span></li><li class="c0 li-bullet-0"><span class="c1">... Might be easier to implement when task scheduling is centralized</span></li><li class="c0 li-bullet-0"><span class="c1">... Not sure if this is cross-browser compatible, so feedback would be appreciated</span></li><li class="c0 li-bullet-0"><span class="c1">... If we want to expose paint events as a result of this correlation tracking, there may be security restrictions on a number of paint events, to avoid developers gaming this somehow and get more paint events than they should to sniff out visited state on links</span></li><li class="c0 li-bullet-0"><span class="c1">... It's possible the requirement for a user-initiated navigation would make it so this throttling is not needed, but I haven't passed this bys security folks</span></li><li class="c0 li-bullet-0"><span class="c1">... So if we can detect soft navs, what can we do?</span></li><li class="c0 li-bullet-0"><span class="c1">... perf-timeline#82 API shape for monitoring new navigation-like entries</span></li><li class="c0 li-bullet-0"><span class="c1">... Point in time developer resolved the promise</span></li><li class="c0 li-bullet-0"><span class="c1">... API shape for same document entries, as well as other navigation-like entries</span></li><li class="c0 li-bullet-0"><span class="c1">... One result of past discussions is we need a Navigation ID to correlate other performance entries with that navigation (e.g. RT, UT) to be able to group them per-navigation</span></li><li class="c0 li-bullet-0"><span class="c1">... Real, BFCache, Soft navs</span></li><li class="c0 li-bullet-0"><span class="c1">... Paint-timing for same-document navigation, would enable Paint Timing correlation</span></li><li class="c0 li-bullet-0"><span class="c1">... Navigation ID helps to correlate to relevant navigation</span></li><li class="c0 li-bullet-0"><span class="c1">... May or may not depend on App History API</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: This is cool, one of the things we're going to think about next year. &nbsp;Otherwise penalizes SPA-style nav even though it's better for users</span></li><li class="c0 li-bullet-0"><span class="c1">... We have a lot of metrics around "largest" or "first"</span></li><li class="c0 li-bullet-0"><span class="c1">... Wonder if shorter-term work is resetting timers or on navigation so we can re-use those same mechanisms</span></li><li class="c0 li-bullet-0"><span class="c1">... Worry if handling a soft-nav diverges too much from initial nav, harder to explain to developers how to optimize this</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Reason it's hard to reset and re-fire LCP and FP and other metrics, right now with History API we don't have a clear starting point. &nbsp;When do we restart them? &nbsp;If we fire them, what's their time origin? Makes it hard</span></li><li class="c0 li-bullet-0"><span class="c1">... Security concerns around exposing paint times more often than once per navigation because it can be used as an attack vector for :visited link-based history interpolation</span></li><li class="c0 li-bullet-0"><span class="c1">... Tie that to user-initiated navigation and not be completely JavaScript controlled</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott G</b>: One other big blind spot for SPA nav, RT don't show up until they're complete, because we don't know the beginning.</span></li><li class="c0 li-bullet-0"><span class="c1">... User-space solutions may help</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Aligns with what Nic was asking for with more network awareness in APIs</span></li><li class="c0 li-bullet-0"><span class="c1">... I'm skeptical with userland implementation, unless it's app-specific if you instrument it fully with ElementTiming and such</span></li><li class="c0 li-bullet-0"><span class="c1">... Harder for RUM providers to generically pick up from any app</span></li><li class="c0 li-bullet-0"><span class="c1">... Require a browser implementation, hopeful that timelines won't be too long</span></li><li class="c0 li-bullet-0"><span class="c1">... Typing as fast as I can</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Steven</b>: Clearly a need for a concept of a reset, each MPA navigation you get LCP, FID, etc. &nbsp;In SPA you can't get them</span></li><li class="c0 li-bullet-0"><span class="c1">... I decide now it's called interaction/navigation/transaction, reset</span></li><li class="c0 li-bullet-0"><span class="c1">... In our use-case, we have a big SPA. &nbsp;We have concept of our own navigation, when we decide click of user was a navigation, we reset all of our measurements. &nbsp;We don't just want to measure soft navigation, but also interactions. &nbsp;Tab within subtab.</span></li><li class="c0 li-bullet-0"><span class="c1">... Because we're measuring at navigation level, we'd miss measurement of sub-tabs, but sometimes those are very important. &nbsp;We've moved to the aspect of "transaction". &nbsp;Ideally we want to measure every click. &nbsp;You can almost forget concept of navigation, and you can measure every interaction</span></li><li class="c0 li-bullet-0"><span class="c1">... To me I would not be opposed to every click or tab we'd reset measurements, and we the developer would send it back for reporting</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: What would you measure after that reset?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Steven</b>: CLS, FID, LCP, usage of JS thread, how long did it take when user clicked</span></li><li class="c0 li-bullet-0"><span class="c1">... Sometimes we get stuck at the navigation concept, and we may another measurement down on the page somewhere</span></li><li class="c0 li-bullet-0"><span class="c1">... A reset mechanism we could call on every click would be more useful for app developers</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: I would argue you can already do all those things, i.e. FID based on event timing. &nbsp;CLS based on layout shifts.</span></li><li class="c0 li-bullet-0"><span class="c1">... For LCP I'm not sure what it's meaning would be if we don't have the concept of tying those paints to the click</span></li><li class="c0 li-bullet-0"><span class="c1">... Responsiveness API would solve your problem for interaction-related things</span></li><li class="c0 li-bullet-0"><span class="c1">... Hoping to solve for navigation with similar mechanism</span></li><li class="c0 li-bullet-0"><span class="c1">... LCP I don't know if it makes sense to have user-based mechanism</span></li><li class="c0 li-bullet-0"><span class="c1">... AI to post issue to minutes and we can discuss</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Awesome we can ask for something in one presentation and have a proposal in the next. Would help with SPA monitoring and LT monitoring. Would be powerful</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: In SPA, for LCP, hard to know if DOM is changing</span></li><li class="c0 li-bullet-0"><span class="c1">... For Chrome, trying to avoid gaming of metrics and making them consistent across all sites</span></li><li class="c0 li-bullet-0"><span class="c1">... Don't want it to impact search</span></li><li class="c0 li-bullet-0"><span class="c1">... Back to ResourceTiming events, something we do in synthetic a lot, looking at when the page finished based on network activity. &nbsp;We see when requests are started, completed, etc.</span></li><li class="c0 li-bullet-0"><span class="c1">... We can wait for 2 seconds of idle after things finish</span></li><li class="c0 li-bullet-0"><span class="c1">... Would help in the generic case but also the app-specific case</span></li><li class="c0 li-bullet-0"><span class="c1">... e.g. we have specific widgets are kicking off activity and want to know when that's done</span></li><li class="c0 li-bullet-0"><span class="c1">... I don't know if the network timeline currently as it's modeled would support something, but if we had incremental updates as request is issued, cors-allowed, complete would help that case</span></li><li class="c0 li-bullet-0"><span class="c1">... Paint linking back to user input is absolutely critical thing to pull out and tease out separately</span></li><li class="c0 li-bullet-0"><span class="c1">... Other things that are LEGO building blocks to measure SPAs well generically and specific cases</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: I would also like to add that I would love to have an SPA compatible LCP event, moreso FCP. &nbsp;For example suppose what triggered it is a button that clicked, so the button repaint could be FCP. &nbsp;Think carefully when measuring the "first" paint. &nbsp;LCP may not want to track before some network response finishes. &nbsp;Not exactly clear. &nbsp;Reason FCP is so important is I've seen a lot of SPAs where there's no visual indication that something has been clicked for a very long time, where MPA the browser itself gives indication.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: We can take the last correlated paint as the first paint. App History API has a definitive end when the developer resolves the Promise, vs. History API where it’s not known when it finishes</span></li><li class="c0 li-bullet-0"><span><b>Michal</b>: Clarifying question for Scott - do you think we should start experimenting with resetting timers in parallel to trying to automatically detect soft navigations?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott G</b>: Both in parallel is what I was thinking about, the problem with automatically measuring is that it may take a long time for all browsers to implement. &nbsp;We need something to fill the gap while a proper solution is baked in and becomes a standard for everyone.</span></li></ul><h2 class="c29" id="h.lkz8vrcxxb0c"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1FHRfuNLYBDVU3nogtcREGFrXAHKoxLKxFYA4lkp4034/edit?usp%3Dsharing%26resourcekey%3D0-MB3VnySrETgDpP3jFVW2rA&amp;sa=D&amp;source=editors&amp;ust=1637836983488000&amp;usg=AOvVaw0A4_ou3WdtJYvR1xwb0nzZ">Animation smoothness</a></span><span>&nbsp;- </span><span>Michal Mocny</span></h2><h3 class="c2" id="h.ei2fdct09ejv"><span class="c18 c10">Summary</span></h3><ul class="c19 lst-kix_mg0k3un0g37b-0 start"><li class="c0 li-bullet-0"><span>Follow-up from a </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/5QGiwslg00E&amp;sa=D&amp;source=editors&amp;ust=1637836983489000&amp;usg=AOvVaw0KUbdHHpM4M5-XZA9eO-DS">recent presentation</a></span><span class="c1">&nbsp;on Animation Smoothness.</span></li><li class="c0 li-bullet-0"><span class="c1">Discussed evaluation criteria for animation frame visual completeness vs. animation smoothness, the states a single animation frame can have, and what that means for the observer.</span></li><li class="c0 li-bullet-0"><span class="c1">Discussion involved making sure the metric is accessible to less-technical folks, emphasized the importance of attribution, as well as a request to get the expected device refresh rate.</span></li></ul><h3 class="c2" id="h.y090n1w900cr"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_y8664apqgwm5-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: We talked about this last year and I've recently presented, so I'm not going to go over the full thing, but links to previous dive</span></li><li class="c0 li-bullet-0"><span class="c1">... Rather get feed back from folks</span></li><li class="c0 li-bullet-0"><span class="c1">... Today: Frame Completeness vs. Animation Smoothness</span></li><li class="c0 li-bullet-0"><span class="c1">... Possible states for a single Animation Frame</span></li><li class="c0 li-bullet-0"><span class="c1">... What is Animation Smoothness?</span></li><li class="c0 li-bullet-0"><span class="c1">... Goals i to deliver complete animation frames in a timely manner</span></li><li class="c0 li-bullet-0"><span class="c1">... 2nd goal is to identify frame updates when they matter, i.e. no jank</span></li></ul><ul class="c19 lst-kix_95omunf7ar-0 start"><li class="c0 li-bullet-0"><span class="c1">… Frame completeness vs animation smoothness</span></li><li class="c0 li-bullet-0"><span class="c1">… a single animation frame is not necessarily presented or dropped</span></li><li class="c0 li-bullet-0"><span class="c1">… there may not be a rendering update</span></li><li class="c0 li-bullet-0"><span class="c1">You can have a partially presented frame</span></li><li class="c0 li-bullet-0"><span class="c1">… Even if you produce an update you can miss content (checkerboarding)</span></li><li class="c0 li-bullet-0"><span class="c1">… quality vs. quantity (e.g. low bitrate smooth video)</span></li><li class="c0 li-bullet-0"><span class="c1">… Difference between some updates and animation updates</span></li><li class="c0 li-bullet-0"><span class="c1">… So, we have to start by detecting active animation</span></li><li class="c0 li-bullet-0"><span class="c1">… try to direct web developers towards composited animations</span></li><li class="c0 li-bullet-0"><span class="c1">… So for a web metric, we need a way to classify if a given frame factors into smoothness</span></li><li class="c0 li-bullet-0"><span class="c1">.. Main thread affecting smoothness</span></li><li class="c0 li-bullet-0"><span class="c1">&lt;slide&gt;</span></li><li class="c0 li-bullet-0"><span class="c1">Compositor</span></li><li class="c0 li-bullet-0"><span class="c1">&lt;slide&gt;</span></li><li class="c0 li-bullet-0"><span class="c1">… So we don’t know immediately if an update impacts smoothness. But we have to wait for the LT to complete before we know if all its frames were delayed or not.</span></li><li class="c0 li-bullet-0"><span class="c1">So tried to create a simplified diagram</span></li><li class="c0 li-bullet-0"><span class="c1">Conceptually a frame is not a boolean, but a fractional, probability value</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 350.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-26 at 19.44.59.png" style="width: 624.00px;<b> height</b>: 350.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: I really like the breakdown. Very technical discussion that requires browser architecture understanding. How do I communicate this up to less technical folks? Can we have a definition that doesn’t rely on internals?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: Great question. Wanted to show y’all the details and then we can discuss simplifications. Made some API proposals in the past. </span></li><li class="c0 li-bullet-0"><span class="c1">.. Our job to put this all together. For each animation frame, we can label for completeness and smoothness</span></li><li class="c0 li-bullet-0"><span class="c1">.. Or we can combine them to a score</span></li><li class="c0 li-bullet-0"><span class="c1">… Important to think about average throughput</span></li><li class="c0 li-bullet-0"><span class="c1">… But sometimes also important to minimize max latency</span></li><li class="c0 li-bullet-0"><span class="c1">… Want developers to focus on the situation and adapt to it.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: It feels to me that, given different frame rates on different devices, it’s important to have a framerate that matches the device. </span></li><li class="c0 li-bullet-0"><span class="c1">.. Maybe we can have an API that enables us to define what’s the level of smoothness that we desire?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: In some earlier version, average throughput was saying “you’re penalized on every missed opportunity”. Didn’t handle the case where higher frame rates mean you have more opportunities to miss.</span></li><li class="c0 li-bullet-0"><span class="c1">… But if look at frame to frame latency, lower framerates give you more time to get it right.</span></li><li class="c0 li-bullet-0"><span class="c1">… Users with higher framerate requirements can have different bars</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: Is there an API to expose the current refresh rate?</span></li><li class="c0 li-bullet-0"><span class="c1">… The desired refresh rate may depend on app type: e.g. Game vs. business</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: Attribution? Lab tooling give you animations by type</span></li><li class="c0 li-bullet-0"><span class="c1">… common issues: </span></li><li class="c0 li-bullet-0"><span class="c1">..animation on the main thread + long tasks</span></li><li class="c0 li-bullet-0"><span class="c1">.. Or compositor animations that overwhelm the GPU</span></li><li class="c0 li-bullet-0"><span class="c1">… So could be completely unrelated to JS</span></li><li class="c0 li-bullet-0"><span class="c1">… So even knowing these things can be useful</span></li><li class="c0 li-bullet-0"><span class="c1">…. So maybe we can expose such top causes</span></li></ul><h2 class="c29" id="h.i0jj89pvjydu"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1yAGotKBvbr9DQMKYMmR92yupflK-t2v_tB3Zy3VoBNk/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1637836983495000&amp;usg=AOvVaw2V3xePJcuZNKpmD-Tjemds">ZStandard in the Browser</a></span><span class="c22">&nbsp;- Nic Jansma</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/Xza2-B7UK2U&amp;sa=D&amp;source=editors&amp;ust=1637836983496000&amp;usg=AOvVaw3xnUi3KIuPAx_O1FFyuuxV">Recording</a></span></p><h3 class="c2" id="h.gt43atr1fjnn"><span>Summary</span></h3><ul class="c19 lst-kix_f2a6455hkc64-0 start"><li class="c0 li-bullet-0"><span class="c1">Zstandard has interesting characteristics of being relatively high compression and relatively low CPU cost</span></li><li class="c0 li-bullet-0"><span>Having the browser support it as an Accept Encoding could provide a benefit for CDNs and Origins that want to compress their </span><span class="c1">dynamic content with higher compression than gzip but less CPU cost than Brotli. If supported by JavaScript Compression API, uses include uploads, beacons, profiling data.</span></li><li class="c0 li-bullet-0"><span class="c1">Interest from other members. &nbsp;Interesting idea to expand Beacon API to request it compresses uploads first. &nbsp;Concerns from browser vendors around binary size, needing to update Compression API to let you specify level.</span></li></ul><h3 class="c2" id="h.camkfflk2x8c"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_c2ezjrtxwn6r-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: zstd is a recent compression algorithm, pushed by the Facebook team</span></li><li class="c0 li-bullet-0"><span class="c1">… want to go over use-cases and background, and talk about maybe adding support for the web, in the browser</span></li><li class="c0 li-bullet-0"><span class="c1">… I’m not an expert on zstd, just a user. </span></li><li class="c0 li-bullet-0"><span class="c1">… May be interesting in the contexts of compression streams, on top of content-encoding</span></li><li class="c0 li-bullet-0"><span class="c1">… published by FB, adopted across the web in tooling</span></li><li class="c0 li-bullet-0"><span class="c1">… Not much web server support for it, there’s maybe an nginx module</span></li><li class="c0 li-bullet-0"><span class="c1">… Not necessarily supported by CDNs, but in many custom client-server set ups</span></li><li class="c0 li-bullet-0"><span class="c1">… At Akamai have been using it for at-rest storage</span></li><li class="c0 li-bullet-0"><span class="c1">… It’s faster than gzip with smaller files</span></li><li class="c0 li-bullet-0"><span class="c1">… experimenting with it internally, and think that the browser use-case can be a good fit</span></li><li class="c0 li-bullet-0"><span class="c1">… zstd published benchmarks</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 324.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-27 at 17.09.13.png" style="width: 624.00px;<b> height</b>: 324.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">Zlib is limited in compression ratios, and loses speed fast</span></li><li class="c0 li-bullet-0"><span class="c1">Comparing speeds, zlib is slower per compression ratio compared to brotli and zstd</span></li><li class="c0 li-bullet-0"><span class="c1">In comparable speeds, zstd is better than brotli</span></li><li class="c0 li-bullet-0"><span class="c1">If we’re comparing compression ratios, it’s also faster than brotli</span></li><li class="c0 li-bullet-0"><span class="c1">Diff between zstd and brotli (on the lower compression levels)</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 183.00px;<b> height</b>: 157.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-27 at 17.12.13.png" style="width: 183.00px;<b> height</b>: 157.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">Decompression speeds are not worse than brotli and zlib</span></li><li class="c0 li-bullet-0"><span class="c1">Precompressing static content gives better compression than gzip, but it’s similar to brotli, and is very CPU intensive</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Where zstd would shine is with dynamic content</b>: HTML pages, API call JSON, etc</span></li><li class="c0 li-bullet-0"><span class="c1">Typically, you wouldn’t brotli 11 these.</span></li><li class="c0 li-bullet-0"><span class="c1">With zstd you could use these lower compression levels that are way better than gzip, as well as low-compression-level brotli</span></li><li class="c0 li-bullet-0"><span class="c1">Less CPU == less costs</span></li><li class="c0 li-bullet-0"><span class="c1">Provides faster decompression in the client, but requires a bit more memory usage</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Another use case</b>: compression streams. Useful for different things (local storage, beacons, profiling data), and zstd can provide a much faster way to do that kind of compression on the client.</span></li><li class="c0 li-bullet-0"><span class="c1">For mpulse, beacons are ~10KB after a lot of client side processing. Gzip can help, but gzip is more costly from a CPU perspective. Zstd can be more efficient</span></li><li class="c0 li-bullet-0"><span class="c1">For profiling data, it can be huge, and could benefit from compression</span></li><li class="c0 li-bullet-0"><span class="c1">Downsides</span></li></ul><ul class="c19 lst-kix_c2ezjrtxwn6r-1 start"><li class="c11 c21 li-bullet-0"><span class="c1">Not as good as brotli on small files - may be related to a dictionary. We could provide a similar one for zstd</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Binary size increase - not sure what that would be, but certainly a cost</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Zstd uses more memory, as the compression window is larger</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Compression level can impact the memory required for decompression</span></li><li class="c11 c21 li-bullet-0"><span class="c1">From a CDN perspective, there are downsides to store an additional content encoding, as it can result in cache fragmentation and lower hit rates</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Origins often speak gzip, and CDNs would need to “translate” that, which adds a cost</span></li></ul><ul class="c19 lst-kix_c2ezjrtxwn6r-0"><li class="c0 li-bullet-0"><span class="c1">Dictionaries</span></li></ul><ul class="c19 lst-kix_c2ezjrtxwn6r-1 start"><li class="c11 c21 li-bullet-0"><span class="c1">Brotli has a 120KB dictionary. May be biased towards older content or some languages.</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Zstd would need something similar to compete over smaller files.</span></li><li class="c11 c21 li-bullet-0"><span class="c1">We could also consider an origin-specific custom dictionary</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Per-origin shared dictionary can be complex from a privacy perspective, but we could use Origin Policy or build such a dictionary over time.</span></li></ul><ul class="c19 lst-kix_c2ezjrtxwn6r-0"><li class="c0 li-bullet-0"><span class="c1">Thoughts?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: Curious if that's gone anywhere with CDN vendors? Brotli adoption was limited until the CDNs supported it</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Can’t speak for other CDNs. At Akamai we have support for content-encoding at the edge, so it would be interesting</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andrew</b>: Haven’t looked at it in details as use brotli 11 a lot, and haven’t seen a lot of advantage over brotli 5</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Adam</b>: Involved in the Compression Streams API, but also partially responsible for working out zstd for Content-Encoding. Wanted to say that the compression stream API is used in 1% of page loads, which is decent. Getting to a point where we can justify adding zstd.</span></li><li class="c0 li-bullet-0"><span class="c1">… The main calculation is the binary size addition. Every user would need to download it, and unclear if it’d pay back the costs. </span></li><li class="c0 li-bullet-0"><span class="c1">… Currently the API only supports gzip level 6. With zstd we could have more flexible ability. From the graph it looks like there are a lot of compression levels.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: 20 or so</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Adam</b>: Uploading beacons and profiling data is an important use-case, and is probably responsible for the majority of adoption. Interested in whether the zstd library supports streaming compression. Last time we talked about it, it didn’t. The compression streams API needs streaming.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andrew</b>: I think that it does. There are many internal use case that would rely on it. I can double check.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: I similarly think it does</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Adam</b>: I’m really interested in implementing. It has a lot of promise and a lot of potential benefits. Chicken and egg problem that until we implement there’s no benefit.]</span></li><li class="c0 li-bullet-0"><span class="c1">… Even for an experiment, we’d need to pay the costs.</span></li><li class="c0 li-bullet-0"><span class="c1">… In an ideal world, someone could provide stats on savings</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andrew</b>: I don’t have exact numbers for facebook.com zstd vs. brotli.</span></li><li class="c0 li-bullet-0"><span class="c1">… We do have numbers of zstd vs. gzip and saw significant improvements</span></li><li class="c0 li-bullet-0"><span class="c1">… The main benefit is from the shared dictionary use case, which shows 30% improvements</span></li><li class="c0 li-bullet-0"><span class="c1">… That could be very useful</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Adam</b>: Followed some of the discussion, but privacy barriers were high and discussion stalled</span></li><li class="c0 li-bullet-0"><span class="c1">… From an implementation perspective, if your asset is in your cache and the shared dict is not, since the asset in cache is compressed, that’s a problem.</span></li><li class="c0 li-bullet-0"><span class="c1">… Wouldn’t want to block on figuring out shared dicts</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: At 1% usage starts to get interesting. If Facebook and mPulse can bump up the stats, would that increase interest?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Adam</b>: If percentages go up, that would empower us to implement zstd.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: On the call we have a lot of beacon providers that can materially move those numbers</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: chicken and egg</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andrew</b>: lack of beacon support is holding us back, there’s a chromium implementation quirk that prevents this from running on page unload, because the API is async</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Adam</b>: May need to add a sync API without streaming</span></li><li class="c0 li-bullet-0"><span class="c1">… Also not happy about blocking the main thread</span></li><li class="c0 li-bullet-0"><span class="c1">… For unload cases, you could send data through the SW</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andrew</b>: it’s in contexts without a SW</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Adam</b>: Please file an issue for a sync API. Not impossible</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Not excited about a sync API/unload. We should discuss alternatives.</span></li><li class="c0 li-bullet-0"><span class="c1">… Also what’s the binary cost?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Adam</b>: Haven’t tried yet</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Ian</b>: +1 on an alternative beacon support that’d help here</span></li><li class="c0 li-bullet-0"><span class="c1">… Also concerned about potential server support. Also, any danger of compression bombs</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Yeah, we control both endpoints, but in general this can be a problem.</span></li></ul><h2 class="c29" id="h.4apxzwsa7si5"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://1drv.ms/p/s!Ajo0wos-4RKZjmh8okadLp8FQDk6?e%3DpmfWJ4&amp;sa=D&amp;source=editors&amp;ust=1637836983508000&amp;usg=AOvVaw0Uu63fwUQw5H6uX5N37zE7">Responsiveness measurement in Excel </a></span><span class="c22">- Noam Helfman</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/-CCgR4NginQ&amp;sa=D&amp;source=editors&amp;ust=1637836983508000&amp;usg=AOvVaw1yTtXv4880fcvcsj6C2J2-">Recording</a></span></p><h3 class="c2" id="h.krxdjr3i9ld5"><span>Summary</span></h3><ul class="c19 lst-kix_x87irn1u7y09-0 start"><li class="c0 li-bullet-0"><span class="c23">We discussed</span><span class="c1 c23">&nbsp;how "Microsoft Excel for the Web" leverages Event Timing API to measure responsiveness of user interactions, the metrics Excel creates with the API, as well as challenges and ideas for further improvements.</span></li><li class="c0 li-bullet-0"><span class="c1 c23">Then we talked about the importance of tracking event-driven paints vs. the next paint, what’s “contentful” in that context, interactionIDs and how they (won’t) help here, and how future scroll measurements may help.</span></li><li class="c0 li-bullet-0"><span class="c23">Noam would file various issues with API improvement ideas. </span></li></ul><h3 class="c2" id="h.1gtp5aqixphm"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_7kgbo4t4lkey-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>NoamH</b>: Noam from Microsoft Excel.</span></li><li class="c0 li-bullet-0"><span class="c1">… Wanted to talk about our thinking on responsiveness in the app</span></li><li class="c0 li-bullet-0"><span class="c1">… Excel is a complex SPA</span></li><li class="c0 li-bullet-0"><span class="c1">… We want to improve interactivity. Talked about animation smoothness yesterday and navigation responses</span></li><li class="c0 li-bullet-0"><span class="c1">… Want to talk about short interactions</span></li><li class="c0 li-bullet-0"><span class="c1">… Using LongTasks to measure issues, but it’s hard to get attribution and it’s mainly about JS execution</span></li><li class="c0 li-bullet-0"><span class="c1">… Alternative approach is using a rAF loop. Only trigger it once the user starts interacting, to avoid wasting battery, so miss the interaction start</span></li><li class="c0 li-bullet-0"><span class="c1">… Want to be as accurate as possible, use it for regression detection, want to use it as an org internal metric to keep us on track, etc</span></li><li class="c0 li-bullet-0"><span class="c1">Definitions:</span></li><li class="c0 li-bullet-0"><span class="c1">… User action- interaction expecting a response</span></li><li class="c0 li-bullet-0"><span class="c1">… Response time - duration of user action till a meaningful response. Aligns with event timing</span></li><li class="c0 li-bullet-0"><span class="c1">… Responsive user action - every response time is below 100ms</span></li><li class="c0 li-bullet-0"><span>…</span><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 326.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-27 at 17.48.50.png" style="width: 624.00px;<b> height</b>: 326.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">Use PerfObserver for events with 100ms responses</span></li><li class="c0 li-bullet-0"><span class="c1">startTime is associated with the event timestamp, which is when the user input happens</span></li><li class="c0 li-bullet-0"><span class="c1">… For every user action we use addEventListener and then call a global function that uses it as a key, as well as a string that represents the user action</span></li><li class="c0 li-bullet-0"><span class="c1">We want to correlate the user action with the EventTiming entry. We do that by storing the events in a map with the timestamp as a key</span></li><li class="c0 li-bullet-0"><span class="c1">When processing event timing, we look for the user action in the map based on the event timestamp</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 305.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-27 at 17.50.40.png" style="width: 624.00px;<b> height</b>: 305.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">&nbsp;After that they log the information and account for it</span></li><li class="c0 li-bullet-0"><span class="c1">It’s not a responsive metric on it’s own</span></li><li class="c0 li-bullet-0"><span class="c1">… We defined a responsive session as one where 90% of sessions are responsive</span></li><li class="c0 li-bullet-0"><span class="c1">… Responsiveness - rate of responsive sessions per action</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 573.00px;<b> height</b>: 174.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-27 at 17.53.12.png" style="width: 573.00px;<b> height</b>: 174.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">Challenges:</span></li></ul><ul class="c19 lst-kix_7kgbo4t4lkey-1 start"><li class="c11 c21 li-bullet-0"><span class="c1">Hard to integrate - we need to inject a JS call to each event handler. Want to ensure that when developers add it, it’d be added to the event handler’s sync part, not the async part.</span></li><li class="c11 c21 li-bullet-0"><span class="c1">You also want to make sure that it’s part of an event handler that modifies the DOM</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Hard to correlate input DOM events with event timing entries - ideally the API would make it easier. Could add an eventID, or use tags on the DOM event</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Event Timing doesn’t support scrolling yet, and that has been discussed previously. Would help us understand scrolling responsiveness.</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Hard to understand timing gaps. Long event handler processing times are known, but hard to know tasks after that (e.g. “is it GC?”). Attribution would be helpful</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Correlating event timing entries with hidden page state is hard</span></li></ul><ul class="c19 lst-kix_7kgbo4t4lkey-0"><li class="c0 li-bullet-0"><span class="c1">Summary:</span></li></ul><ul class="c19 lst-kix_7kgbo4t4lkey-1 start"><li class="c11 c21 li-bullet-0"><span class="c1">Event Timing API is very useful, even if improvements can be made</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Thinking about JS-self-profiling and cross event timing entries with profiles that’d allow better analysis</span></li><li class="c11 c21 li-bullet-0"><span class="c1">Would be happy for Event Timing support from other vendors</span></li></ul><ul class="c19 lst-kix_7kgbo4t4lkey-0"><li class="c0 li-bullet-0"><span class="c1">Thoughts?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: Minor clarification. You mentioned first meaningful paint, but then talked about input delay.</span></li><li class="c0 li-bullet-0"><span class="c1">… Do you need to handle all those async tasks, or are you interested in the first frame</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: async callbacks may be scheduled and can get in the way of the frame presented, if those async tasks are blocked</span></li><li class="c0 li-bullet-0"><span class="c1">… Assumption it that the DOM modification happens inside the sync event handlers</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: Curious about it in the context of task tracking</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: We try to do similar things without task chaining using Element Timing. Requires some heuristics.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nicol&aacute;s</b>: Thanks for the use case presentation. Useful to know and may encourage other vendors to implement. </span></li><li class="c0 li-bullet-0"><span class="c1">… Thanks for showing the challenges. Are there GH issues for all of them?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: I can certainly file issues</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nicol&aacute;s</b>: We’ve been working on something similar and tracking interactions. We have something called interaction ID which is shipping in Chromium, but is not available in the event itself, so won’t solve your problem.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: We looked at it, but it’s more around coordinating multiple related events</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Steven</b>: Yesterday, we talked about resetting the measurements and wondered: if FCP was resettable, would that help you?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: The tricky part is what “first” and “contentful” means. For complex responses, the immediate response could be a spinner, which is not contentful. We want to measure the spinner and ensure it’s there ASAP (&lt;100 ms).</span></li><li class="c0 li-bullet-0"><span class="c1">… If we open a dropdown menu, it may come from a JS that we haven’t downloaded yet.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Wanted to comment that in this context, FCP is indeed problematic. If the click is instigated via mouse or keyboard, the border of the button would be drawn. So different interactions can change these animations.</span></li><li class="c0 li-bullet-0"><span class="c1">… You would also miss CSS animations that won’t count as contentful</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: FP and FCP are weird on an existing page. Many interactions are not contentful.</span></li><li class="c0 li-bullet-0"><span class="c1">… FP may make sense</span></li><li class="c0 li-bullet-0"><span class="c1">… “frame presented” is an equivalent of LCP but may be app specific</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: DOM modifications in an async task may not happen in the current frame, and rendering would happen due to some other task. That’s the challenge for us, to make sure we’re tracking it in the right place</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Sean</b>: Do you have similar data from Firefox?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Using the API only in Chromium. We understood the API is not fully supported</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Sean</b>: It’s fully supported now</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: We’ll take a look at that.</span></li><li class="c0 li-bullet-0"><span class="c1">… For firefox, we’re using metrics based on LongTasks and rAF</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: IIUC, motivations for limiting paint timing exposure is to prevent timing attack from seeing things like visited links</span></li><li class="c0 li-bullet-0"><span class="c1">… Initial thought is that if we expose PaintTiming again after user interaction, that might be limited enough to make PaintTiming attacks impractical</span></li><li class="c0 li-bullet-0"><span class="c1">.. So would enable exposing paint timing in those scenario</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Also, if the browser had a paint sequence ID that is then reflected in the Paint Timing entries</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Linking DOM operations and paints may not be trivial (at least in Chromium)</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: I like how you defined Responsiveness but you say “per action”. Are you slicing sessions that had at least one user interactions</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Yeah, otherwise we’d have sessions with no interactions that would skew the result</span></li><li class="c0 li-bullet-0"><span class="c1">… The 90% is aiming to exclude outliers. Experimenting with thresholds</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: If a user action was done less than 10% of the time, would fast interactions drown it</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: no because we bucket different interactions separately.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: question on scrollstart. Scrollstart doesn’t have high latencies typically</span></li><li class="c0 li-bullet-0"><span class="c1">… Is it threaded scrolling or do you have a non-passive scroll where the scroll events block on the main thread.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: Looking at scrolls with rAF loops to look for LTs during the scroll</span></li><li class="c0 li-bullet-0"><span class="c1">… So we miss the part where we start the scroll</span></li><li class="c0 li-bullet-0"><span class="c1">… And then we look at the animation smoothness of the scroll</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: We should follow up on it. Threaded scrolling can result in slow animation frames that are not actionable</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nicol&aacute;s</b>: Not sure if developers can tell if scrolling is fully composited. Scrollstart can help there as well</span></li><li class="c0 li-bullet-0"><span class="c1">… Planning on tackling this problem so stay tuned and come help shaping the API.</span></li><li class="c0 li-bullet-0"><span class="c1">… Otherwise, agree it’s more of a smoothness issue</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Noam</b>: But it could also be related to JS tasks</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: It will depend. May be most interesting to know. But if the scroll doesn’t block on main, you won’t get that info.</span></li></ul><p class="c3"><span class="c1"></span></p><h2 class="c29" id="h.18mgbl4w1t93"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1e7USJ13qAoIpfu1QW24Cv9xikWDKFKBsXF8uVJ7YP4E/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1637836983519000&amp;usg=AOvVaw1_0cbGDzem99C2KHu8FLfK">Optimizing Third-party script loading</a></span><span class="c13">&nbsp;- </span><span class="c22">&nbsp;Addy Osmani + Pat Meenan</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/DKbv-OGRpi4&amp;sa=D&amp;source=editors&amp;ust=1637836983520000&amp;usg=AOvVaw0HWNG_i33ZJgFY6uIM3LkA">Recording</a></span></p><h3 class="c2" id="h.acq4lpn6vhsk"><span>Summary</span></h3><p class="c3"><span class="c1"></span></p><ul class="c19 lst-kix_g0xj42mhf4l9-0 start"><li class="c0 li-bullet-0"><span class="c1">Two primary ways to approach mitigating the performance impact of 3Ps on the web: giving developers (who are sufficiently perf savvy) the right controls, the user-agent intervening in cases where 3Ps may have an egregious impact on performance</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Controls</b>: better ways to tackle loading sequencing between 1P and 3P, preload, priority hints (do check out the origin trial!), early hints.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Interventions</b>: lazy-loading embeds, throttling 3Ps detected to be likely less critical to the page based on heuristics. Some visual demos were shown of potential impact. </span></li><li class="c0 li-bullet-0"><span class="c1"><b>From the discussion</b>: general support for the idea, but emphasis that there need to be ways to opt out if a business understands the performance vs. marketing/KPI trade-offs of a 3P and still want to load it without the interventions applied.</span></li></ul><h3 class="c2" id="h.mi7j9jtea3e3"><span class="c10 c18">Minutes</span></h3><ul class="c19 lst-kix_spr6x5pb1u0q-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Addy</b>: Discuss third-party (3P) script loading</span></li><li class="c0 li-bullet-0"><span class="c1">... Has impacted web performance for over a decade</span></li><li class="c0 li-bullet-0"><span class="c1">... Ideas to incrementally improve performance for platform</span></li><li class="c0 li-bullet-0"><span class="c1">... What's the problem with loading performance?</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 282.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(23).png" style="width: 624.00px;<b> height</b>: 282.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... What do we mean by third party scripts?</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 338.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(24).png" style="width: 624.00px;<b> height</b>: 338.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... We have been doing a lot of research on Chrome side</span></li><li class="c0 li-bullet-0"><span class="c1">... Most studies via developer surveys or lab analysis shows that optimizing 3P remains top challenges for sites that want to do well on performance and with metrics like Core Web Vitals (CWV)</span></li><li class="c0 li-bullet-0"><span class="c1">... Large percentage of JS execution on web tends to be 3P code</span></li><li class="c0 li-bullet-0"><span class="c1">... Impact on web:</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 316.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(25).png" style="width: 624.00px;<b> height</b>: 316.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Metrics, do sites have insights into their 3Ps, improving attribution and IFRAME activity</span></li><li class="c0 li-bullet-0"><span class="c1">... Organizations issues, the audiences adding 3Ps may not be perf experts. &nbsp;Using tag manager into pages. &nbsp;Often working around engineering teams</span></li><li class="c0 li-bullet-0"><span class="c1">... Ecosystem - are 3P incentivized about their footprint? &nbsp;Some are not</span></li><li class="c0 li-bullet-0"><span class="c1">... Web platform side, giving developers sufficient knobs to have more control over this problem.</span></li><li class="c0 li-bullet-0"><span class="c1">... Developer tooling so developers have enough attribution in lab and field</span></li><li class="c0 li-bullet-0"><span class="c1">... Pat will talk about resource ordering on platform side</span></li><li class="c0 li-bullet-0"><span class="c1">... I'll talk about browser side</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: As Addy's mentioned getting the order right can have a huge impact on performance</span></li><li class="c0 li-bullet-0"><span class="c1">... Studies going back showing cutting load times in half if you can predict order resources need to be loaded in</span></li><li class="c0 li-bullet-0"><span class="c1">... What can we do to give knobs to dev to order things</span></li><li class="c0 li-bullet-0"><span class="c1">... Origin rules moving script to end of body</span></li><li class="c0 li-bullet-0"><span class="c1">... async/defer has been added giving some success</span></li><li class="c0 li-bullet-0"><span class="c1">... Lazy Loading for image and IFRAMEs in particular</span></li><li class="c0 li-bullet-0"><span class="c1">... Hinting to browser for things it can't discover like DNS-prefetch, preconnect, Preload</span></li><li class="c0 li-bullet-0"><span class="c1">... Some of the things that are more in-flight right now, we're experimenting with Priority Hints to give knobs to indicate which scripts/images are more important.</span></li><li class="c0 li-bullet-0"><span class="c1">... Things that are hard to get right automatically all of the time,w e can give developers explicitly controls</span></li><li class="c0 li-bullet-0"><span class="c1">... At a protocol level, H/2 had priority support of some kind, wasn't greatly supported or implemented. &nbsp;Improved as part of H/3.</span></li><li class="c0 li-bullet-0"><span class="c1">... Doesn't work across origins, so doesn't work with 3Ps</span></li><li class="c0 li-bullet-0"><span class="c1">... When you have 10 different origins serving content in parallel, with priorities among them</span></li><li class="c0 li-bullet-0"><span class="c1">... Early Hints in experiments right now as well where you can do preconnect/preload earlier in the process</span></li><li class="c0 li-bullet-0"><span class="c1">... Is there something missing being able to define an explicit order</span></li><li class="c0 li-bullet-0"><span class="c1">... For Google Fonts, you know you have a CSS that will load a font but not which one, you can preconnect but not preload</span></li><li class="c0 li-bullet-0"><span class="c1">... Execution control: Preload and insert script tag dynamically</span></li><li class="c0 li-bullet-0"><span class="c1">... One of the things we're playing with is preloading script and onload handler decides if it's the right time to insert the tag dynamically</span></li><li class="c0 li-bullet-0"><span class="c1">... Do we need something declarative to not insert a script after X event</span></li><li class="c0 li-bullet-0"><span class="c1">... Rendering, black box right now</span></li><li class="c0 li-bullet-0"><span class="c1">... Everything in head that's blocking is render blocking</span></li><li class="c0 li-bullet-0"><span class="c1">... A/B scripts anti-flicker scripts bane of our existence</span></li><li class="c0 li-bullet-0"><span class="c1">... Block rendering, something more declarative we could do?</span></li><li class="c0 li-bullet-0"><span class="c1">... Safari and Chrome have different views about incrementally display content as it arrives vs. first render event</span></li><li class="c0 li-bullet-0"><span class="c1">... Do devs need more control over that?</span></li><li class="c0 li-bullet-0"><span class="c1">... If we find we have all of the atomic controls for devs to do exactly the ordering they want to give the optimal experience, we don't necessarily know the adoption will be huge but do we have the knobs to make those changes</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Addy</b>: For folks that are incentivized, how can we give them knobs? &nbsp;But for folks that are incentivized but don't have control to make changes, how can we intervene?</span></li><li class="c0 li-bullet-0"><span class="c1">... An intervention is UA opts for an intentional deviation from a behavior the developer expects/relies on. &nbsp;Not risk-free</span></li><li class="c0 li-bullet-0"><span class="c1">... Motivated by the desire to fulfill an important user need</span></li><li class="c0 li-bullet-0"><span class="c1">... Interventions have successfully improved UX over the years. &nbsp;Passive touch listeners, throttling timers that are out of view in other frames, throttling expensive timers</span></li><li class="c0 li-bullet-0"><span class="c1">... Played out to varying degrees of success</span></li><li class="c0 li-bullet-0"><span class="c1">... Case to be made where the platform could be helping people if we can get this right</span></li><li class="c0 li-bullet-0"><span class="c1">... Two examples, Pat talked about knobs and loading=lazy.</span></li><li class="c0 li-bullet-0"><span class="c1">... Focus on Images and Iframes</span></li><li class="c0 li-bullet-0"><span class="c1">... What if the browser was to help out here a little more by default</span></li><li class="c0 li-bullet-0"><span class="c1">... Embeds today are highly interactive, loading hundreds of KB of script, taking up main thread and causing resource contention</span></li><li class="c0 li-bullet-0"><span class="c1">... Maybe video players much loader down don't need to be eagerly loaded</span></li><li class="c0 li-bullet-0"><span class="c1">... What is the potential perf improvement here</span></li><li class="c0 li-bullet-0"><span class="c1">... Significant improvements to Total Blocking Time (TBT) and data savings</span></li><li class="c0 li-bullet-0"><span class="c1">... Another idea is to identify 3Ps that are less critical on page</span></li><li class="c0 li-bullet-0"><span class="c1">... 3Ps responsible for 57% of JS execution on th web</span></li><li class="c0 li-bullet-0"><span class="c1">... Social media sharing, live help, A/B testing or personalization</span></li><li class="c0 li-bullet-0"><span class="c1">... Sometimes these are important for critical loading path</span></li><li class="c0 li-bullet-0"><span class="c1">... Can't arbitrarily throttle anything that's not 1P</span></li><li class="c0 li-bullet-0"><span class="c1">... Few potential ideas for how one could go about identifying less critical</span></li><li class="c0 li-bullet-0"><span>... </span><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 342.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(26).png" style="width: 624.00px;<b> height</b>: 342.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Lot of potential signals one could use</span></li><li class="c0 li-bullet-0"><span class="c1">... Developer annotation could help</span></li><li class="c0 li-bullet-0"><span class="c1">... What are the opportunities here? &nbsp;One thing we've been doing is working with partners</span></li><li class="c0 li-bullet-0"><span class="c1">... Optimizing 3P script loading, could you see significant improvement to loading metrics</span></li><li class="c0 li-bullet-0"><span class="c1">... To what extent can you see business improvements</span></li><li class="c0 li-bullet-0"><span class="c1">... Improvements in LCP, CWV pass rates, better TTI, in addition to business outcome improvements across the board</span></li><li class="c0 li-bullet-0"><span class="c1">... Potentially appetite in ecosystem without affecting business outcomes in a negative way</span></li><li class="c0 li-bullet-0"><span class="c1">... How do we make sure interventions had limited surprise?</span></li><li class="c0 li-bullet-0"><span class="c1">... How are we thinking about heuristics, lazy loading embeds</span></li><li class="c0 li-bullet-0"><span class="c1">... All would need to be validated in production</span></li><li class="c0 li-bullet-0"><span class="c1">... Potentially if we were able to build confidence in these ideas, we may be able to ship by default</span></li><li class="c0 li-bullet-0"><span class="c1">--- questions ---</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Aram</b>: Note that loading of stuff below the fold especially video and audio is often a technique to prepare revenue-generating elements.</span></li><li class="c0 li-bullet-0"><span class="c1">... Might be less transparent now than a couple years ago, because monetization techniques are server-side insertion</span></li><li class="c0 li-bullet-0"><span class="c1">... I'm generally pro the idea of interventions but it might be good for developers who are thinking about this, I definitely want this to overwrite the intervention for revenue reasons</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Addy</b>: Fully agree, if there is an intervention, we want to make sure for folks who are conscious of the tradeoffs can choose the right behavior at the end of the day</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Two points. &nbsp;We agree this is a significant issue for customers building websites at WIX. &nbsp;How much of a performance price are they paying for 3P scripts on their site? Reminders about the fact they still have 3P scripts in case they forget.</span></li><li class="c0 li-bullet-0"><span class="c1">... Lot of things we can do there for our side as a platform for building websites</span></li><li class="c0 li-bullet-0"><span class="c1">... A lot of the stuff you're saying it relevant for 1P scripts, for example I'm using React with SSR or SSG, I may want to delay the download of beginning of hydration script after LCP image finishes downloading, and delay execution of hydration script after image finished rendering</span></li><li class="c0 li-bullet-0"><span class="c1">... Nothing to do with 3P scripts but for syncing execution</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: FWIW all of the explicit controls we discussed don't differentiate between 1P and 3P, so please use them</span></li><li class="c0 li-bullet-0"><span class="c1">... All of the explicit controls are intended for used for 1P, and help within protocol-level prioritization as well</span></li><li class="c0 li-bullet-0"><span class="c1">... Interventions are more around 3P because it's a little easier to carve out</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Even with the controls available and are improving, happy with Preload, it still can be really challenging for syncing resources for optimal sequence. &nbsp;Prioritizing urgent vs. important.</span></li><li class="c0 li-bullet-0"><span class="c1">... Not familiar with websites that are using hydration that are able to pull off the scenario I just described</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Priority Hints might be useful for that case</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: On our backlog, on our end not all relevant resources are downloaded from same domain</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: Priority Hints doesn't care about origin</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: One comment is that it seems like the work you're investigating here is that it's close to the attribution work that others have talked about. &nbsp;1P sites don't push further on 3P because it's harder to understand how a 3P script is causing the performance for the site.</span></li><li class="c0 li-bullet-0"><span class="c1">Mystery can also happen in 1P contexts in large orgs, where teams are far apart</span></li><li class="c0 li-bullet-0"><span class="c1">... Question was how some of these interventions depend on the behaviors of the 3P scripts. &nbsp;Would choices of interventions affect 3P script developers?</span></li><li class="c0 li-bullet-0"><span class="c1">... Might need to change long tasks or network requests so I can get back in good graces.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Addy</b>: I would be happy if 3Ps react in that way where they can invest in improvements.</span></li><li class="c0 li-bullet-0"><span class="c1">... Interested in hearing about 3Ps what optimizations we have in mind</span></li><li class="c0 li-bullet-0"><span class="c1">... Yelling at 3P via developer tools and guidance</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Pat</b>: On the attribution and reporting side, CWV and search data goes back to the website, and there's not a cross-industry way to blame specific 3P. An example question, does mPulse, across all websites cause long tasks? Can we attribute specific 3Ps causing issues?</span></li><li class="c0 li-bullet-0"><span class="c1">... Or even with Google A/B Optimize if we can somehow attribute that to LCP delays, should we be doing work with 3Ps</span></li><li class="c0 li-bullet-0"><span class="c1">... Extensions are an interesting twist to that as well, if adblock causes longtasks by injecting code into page, website doesn't have any control over that</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: Extension case is super interesting. Wonder if this is surfaced to users. Common extensions can really impact analysis, and users have no idea</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Wanted to respond. Our experience is not positive. We have a flag to completely disable 3P scripts. We use it to prove to customers that 3P cause slowness, but they “need to run that marketing campaign” and that beats everything else</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: One comment I had - attributing to 3Ps, we are completely blind to 3P iframes. Some way for iframes to share data and linkage between requests triggering requests would really help us to help our customers to understand the effect of a script, beyond just turning it off and seeing what happens. Dependency tree of resources would help.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Addy</b>: Agree about the gap there. Thought about this from a CrUX perspective, but for privacy reasons it’s hard to offer aggregate insight into what 3Ps are doing. May be able to say what classes of 3Ps are doing.</span></li><li class="c0 c33 li-bullet-0"><span class="c1"></span></li></ul><p class="c3"><span class="c1"></span></p><h2 class="c35" id="h.68mp9m9a6oh"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/WICG/js-self-profiling/blob/main/doc/tpac-2021-slides.pdf&amp;sa=D&amp;source=editors&amp;ust=1637836983554000&amp;usg=AOvVaw2ECwMsLUdvXPXRmz5HwGX8">JS self-profiling: Long Tasks and VM state</a></span><span class="c22">&nbsp;- Andrew Comminos</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/it-mPe1ct8Y&amp;sa=D&amp;source=editors&amp;ust=1637836983555000&amp;usg=AOvVaw3Y1F9wxH4ZPC2biZm9vxVS">Recording</a></span></p><h3 class="c2" id="h.x9cst7lr2paz"><span>Summary</span></h3><ul class="c19 lst-kix_7ud9h2t659dd-0 start"><li class="c0 li-bullet-0"><span class="c1">The JS Self-Profiling API has shipped in Chrome 94, and we have real-world data confirming the performance of the Blink/V8 implementation.</span></li><li class="c0 li-bullet-0"><span class="c1">It’s been a useful tool for discovering JS side footguns, but we have limited insight into non-JS execution, as well as when the profiler is not running.</span></li><li class="c0 li-bullet-0"><span class="c1">The markers proposal was discussed, which adds context to samples about running gc/layout/paint/etc.</span></li><li class="c0 li-bullet-0"><span class="c1">To resolve challenges developers have with attributing the cause of long tasks, another proposal to extend the long tasks API with JS samples from the profiler was discussed.</span></li></ul><h3 class="c2" id="h.xntaix8fll4d"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_376ipe9z4ys9-0 start"><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: Recent updates to JS Self Profiling API, improvements that are interesting and worth discussing</span></li><li class="c9 li-bullet-0"><span class="c1">... Recap to where we are now</span></li><li class="c9 li-bullet-0"><span class="c1">... API for those that aren't familiar</span></li><li class="c9 li-bullet-0"><span class="c1">... Web-exposed sampling profiler for measuring JavaScript</span></li><li class="c9 li-bullet-0"><span class="c1">... Think of dev tools profiler but on web</span></li><li class="c9 li-bullet-0"><span class="c1">... Provide real-user samples vs. biased developers device</span></li><li class="c9 li-bullet-0"><span class="c1">... Shipped in Chrome 94</span></li><li class="c9 li-bullet-0"><span class="c1">... Usage:</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 148.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(27).png" style="width: 624.00px;<b> height</b>: 148.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... Send over a trace, with Compression Streams over to your server for analysis</span></li><li class="c9 li-bullet-0"><span class="c1">... Server can do trace aggregation, helps developers get an idea what's slow on client machines</span></li><li class="c9 li-bullet-0"><span class="c1">... API used in conjunction with Perf Timeline, can do cross-correlation</span></li><li class="c9 li-bullet-0"><span class="c1">... Send over Long Task entries, EventTiming, Nav/Resource data</span></li><li class="c9 li-bullet-0"><span class="c1">... Trace format:</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 273.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(28).png" style="width: 624.00px;<b> height</b>: 273.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... Trie of JavaScript frames, similar to Chrome/Spidermonkey</span></li><li class="c9 li-bullet-0"><span class="c1">... What's working well?</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 200.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(29).png" style="width: 624.00px;<b> height</b>: 200.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... Facebook and other large properties have gotten signal for how it can be used</span></li><li class="c9 li-bullet-0"><span class="c1">... Did not introduce unmanageable overhead, &lt;1% impact for top-line metrics</span></li><li class="c9 li-bullet-0"><span class="c1">... Drop-in solution for client teams to focus on perf, make perf more accessible</span></li><li class="c9 li-bullet-0"><span class="c1">... Easy tracing</span></li><li class="c9 li-bullet-0"><span class="c1">... Strong adoption from other industry partners</span></li><li class="c9 li-bullet-0"><span class="c1">... What could we do better?</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 248.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(30).png" style="width: 624.00px;<b> height</b>: 248.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... In interest of focusing on client JS, we omitted other top-level UA work</span></li><li class="c9 li-bullet-0"><span class="c1">... GC and Paints missing</span></li><li class="c9 li-bullet-0"><span class="c1">... Indistinguishable from idle execution</span></li><li class="c9 li-bullet-0"><span class="c1">... Interactions with Long Task API can be cumbersome</span></li><li class="c9 li-bullet-0"><span class="c1">... Don't want to be enabling profiler on all page loads, but might want to figure out if we get a bad sample why it's slow</span></li><li class="c9 li-bullet-0"><span class="c1">... Attribution has been discussed in working group</span></li><li class="c9 li-bullet-0"><span class="c1">... Some of our ideas for how it we can get better UA state</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Corentin</b>: To solve the issues highlighted by Andrew, like to propose a way to mark state</span></li><li class="c9 li-bullet-0"><span class="c1">... Highlight category of work by UA at time it was captured</span></li><li class="c9 li-bullet-0"><span class="c1">... Bring us closer to capabilities of profilers in Dev Tools</span></li><li class="c9 li-bullet-0"><span class="c1">... Event can be categorized in different types of tasks</span></li><li class="c9 li-bullet-0"><span class="c1">... We focus what could be marker candidates</span></li><li class="c9 li-bullet-0"><span class="c1">... Main issue is interoperability, want marker to have some meaning across traces and UAs</span></li><li class="c9 li-bullet-0"><span class="c1">... Interested in feedback in proposal for what would be most relevant and safe</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 281.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(31).png" style="width: 624.00px;<b> height</b>: 281.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... Could consider garbage collection, parer marker</span></li><li class="c9 li-bullet-0"><span class="c1">... On rendering side things are more difficult to spec</span></li><li class="c9 li-bullet-0"><span class="c1">... General Paint marker that aggregates style/layout/paint</span></li><li class="c9 li-bullet-0"><span class="c1">... But would be useful to split these markers</span></li><li class="c9 li-bullet-0"><span class="c1">... API modification</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 254.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(32).png" style="width: 624.00px;<b> height</b>: 254.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... What it could look like in an actual case</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 405.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(33).png" style="width: 624.00px;<b> height</b>: 405.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... "gc" marked on right side</span></li><li class="c9 li-bullet-0"><span class="c1">... Highlight idle, rendering events</span></li><li class="c9 li-bullet-0"><span class="c1">... Security and privacy concerns</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 253.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(34).png" style="width: 624.00px;<b> height</b>: 253.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... Need to avoid new side channels</span></li><li class="c9 li-bullet-0"><span class="c1">... Some events that aren't immediately attributable to an origin</span></li><li class="c9 li-bullet-0"><span class="c1">... Could require isolations to attach that marker to a sample</span></li><li class="c9 li-bullet-0"><span class="c1">... Started a TAG review</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 221.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(35).png" style="width: 624.00px;<b> height</b>: 221.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... Open questions:</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 368.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(36).png" style="width: 624.00px;<b> height</b>: 368.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... With JS Self Profiling API, we could make Long Task API more actionable</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 229.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(37).png" style="width: 624.00px;<b> height</b>: 229.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... If you're running a profiler, you can cross-correlate with Long Task Observer</span></li><li class="c9 li-bullet-0"><span class="c1">... Find root cause, expensive sampled functions</span></li><li class="c9 li-bullet-0"><span class="c1">... Identify UA-level work for free</span></li><li class="c9 li-bullet-0"><span class="c1">... Drawback: Recording all samples, to correlate with Long Task Observed</span></li><li class="c9 li-bullet-0"><span class="c1">... Increases memory and CPU</span></li><li class="c9 li-bullet-0"><span class="c1">... Can we limit sample to only during Long Tasks</span></li><li class="c9 li-bullet-0"><span class="c1">... No Active profiler necessary</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 220.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(38).png" style="width: 624.00px;<b> height</b>: 220.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 260.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(39).png" style="width: 624.00px;<b> height</b>: 260.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">... Interested in feedback for this proposal, hope it improves LT attribution</span></li><li class="c9 li-bullet-0"><span class="c1">... Open questions:</span></li><li class="c9 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 244.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(40).png" style="width: 624.00px;<b> height</b>: 244.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c9 li-bullet-0"><span class="c1">--- questions ---</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Randell</b>: With Long Tasks, one thing that I've used in the past for capturing similar data in other profilers to have an event that tells you something has occurred, so you could save the current set of samples some configurable amount of time when you have an indication of Long Task. &nbsp;You don't need to retain a large amount of data</span></li><li class="c9 li-bullet-0"><span class="c1">... Continue it until the end of the Long Task eventually</span></li><li class="c9 li-bullet-0"><span class="c1">... Some tricks can be played to limit memory and CPU overhead</span></li><li class="c9 li-bullet-0"><span class="c1">... API seems interesting and useful. &nbsp;Main concerns are security around cross-origin and timing exposure for Spectre and other issues, might be covered in spec</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: Thanks for feedback</span></li><li class="c9 li-bullet-0"><span class="c1">... Trying to be conservative with overhead and make accessible for web developers</span></li><li class="c9 li-bullet-0"><span class="c1">... Hard to spin up trace processing infrastructure to support these cases</span></li><li class="c9 li-bullet-0"><span class="c1">... Is a single sample enough? &nbsp;Keeping a small buffer to backtrack, is more robust</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Randell</b>: Related to this, is the impact of user performance on different classes of machines</span></li><li class="c9 li-bullet-0"><span class="c1">... Developer machine vs. reference laptop not as happy taking any sort of profile</span></li><li class="c9 li-bullet-0"><span class="c1">... Relative impact can be larger on lower-end machines</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: Our earlier number of 1% shared before was across all profiles. &nbsp;Some may be higher or smaller</span></li><li class="c9 li-bullet-0"><span class="c1">... Found a lot of issues front he profiler itself</span></li><li class="c9 li-bullet-0"><span class="c1">... RE: security, bunch of issues added to Github in past few months, had several reviews</span></li><li class="c9 li-bullet-0"><span class="c1">... Discussions around around timing precision, clamping to 10ms</span></li><li class="c9 li-bullet-0"><span class="c1">... Using ECMA realm-based checks</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Yoav</b>: Exposing the markers to PerformanceTimeline instead of profiler, would you expect makers to have same overhead as profiling</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: Main concern is instrumentation vs sampling</span></li><li class="c9 li-bullet-0"><span class="c1">... GC itself would expose in timeline</span></li><li class="c9 li-bullet-0"><span class="c1">... Performance tradeoffs</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Yoav</b>: Long Task attribution, assuming we can actually pull it off, starting profiling when LT is in progress (or if possible retroactively when it started), it could be a big complement around SPA measurement</span></li><li class="c9 li-bullet-0"><span class="c1">... Generally linking tasks without overhead of profiling, but would only give entrypoint to tasks. &nbsp;Complementing that with LongTask specific profiling could be powerful in my opinion.</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: With our usage of Profiling API internally, we do a subset of all interactions which is good in aggregate, but we encounter situations where something is bad and we don't have profiling, not enough signal</span></li><li class="c9 li-bullet-0"><span class="c1"><b>NPM</b>: Recall we shipped a version which does not restrict on some initial security primitives, not the case for a lot of the browser work, so is the plan to gate that new feature by these security primitives?</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: Ideally we can do some as much as we can to origins, investigating from security POV. &nbsp;In many cases we're not able to.</span></li><li class="c9 li-bullet-0"><span class="c1">... Would have to be some sort of extended security model</span></li><li class="c9 li-bullet-0"><span class="c1">... Already exists with measureMemory() model where if we're Cross-Origin-Isolated we include additional heap statistics</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Yoav</b>: We have different clamping for timers for Cross-Origin Isolated or not</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: TL;DR - still exploring</span></li><li class="c9 li-bullet-0"><span class="c1"><b>NPM</b>: Today measureMemory() doesn't work without Cross-Origin Isolation</span></li><li class="c9 li-bullet-0"><span class="c1">... Long Tasks use-case I find exciting, but the major cost is initializing the profiler. Is this convenience for developers or would we have these on by default? &nbsp;What's the benefit?</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: Developer ergonomics, you have to define buffers and attribution. &nbsp;Aiming for wider adoption</span></li><li class="c9 li-bullet-0"><span class="c1">... Conceivable doing stack sampling itself, overhead could be mitigated by one-off sample vs. periodic sampling where we can bail out sooner if we're not a part of a Long Task</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Noam</b>: RE: CPU overhead, for us the approach you're taking using profiler in sampling approach, we do it periodically. &nbsp;Some interval, evaluating performance of profiler.</span></li><li class="c9 li-bullet-0"><span class="c1">... If you want to overlay that with Long Tasks, you may not hit tasks with profiler</span></li><li class="c9 li-bullet-0"><span class="c1">... What we think would work is if you have a site that's sufficiently active with samples, statistically you'll get LongTasks and stack measurements and combine them</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: We're doing something similar, finding intersection with Long Tasks</span></li><li class="c9 li-bullet-0"><span class="c1">... Main concern is that this doesn't happen frequently enough. &nbsp;Need larger sample size which increases burden in aggregate from profiler.</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Noam</b>: It is a solution if there's no other technical solution from browser</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Nic</b>: If there is an active sampling profiler when the LT happens, you could attach the profile to the LT, rather than doing the intersection later</span></li><li class="c9 li-bullet-0"><span class="c1"><b>Andrew</b>: Looked into that, by providing an ID inside the samples</span></li></ul><p class="c20 c33"><span class="c1"></span></p><p class="c20 c33"><span class="c1"></span></p><h2 class="c29" id="h.mldk2zafi9mw"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1RMDhVHc6Rby3GYUG6033vVx77LIzxBmOAj2dWoofk2I/edit%23slide%3Did.p&amp;sa=D&amp;source=editors&amp;ust=1637836983575000&amp;usg=AOvVaw1vAQKcCinGtefYBpSMaXb7">Renderblocking attribute</a></span><span class="c22">&nbsp;- Xiaocheng Hu</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/8XCplikIwvM&amp;sa=D&amp;source=editors&amp;ust=1637836983575000&amp;usg=AOvVaw3o_PnTYXEAUNyzk6QHqJ_3">Recording</a></span></p><h3 class="c2" id="h.zcbqthxv0uhr"><span>Summary</span></h3><ul class="c19 lst-kix_n86quw5wooza-0 start"><li class="c0 li-bullet-0"><span class="c1">A proposal for a 'renderblocking' attribute to improve resource loading performance and UX (FOUC, FOIT, CLS, etc.) was presented.</span></li><li class="c0 li-bullet-0"><span class="c1">Then we discussed various extended syntaxes for more use cases, and 3rd party abuse risks with possible mitigations.</span></li></ul><h3 class="c2" id="h.y1cdtjacmmnt"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_tjqtpvyutk54-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Xiaocheng</b>: Proposal for a `renderblocking` attribute for link resources and scripts</span></li><li class="c0 li-bullet-0"><span class="c1">... Already have a render blocking mechanism in browsers</span></li></ul><p class="c11"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 304.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(41).png" style="width: 624.00px;<b> height</b>: 304.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></p><ul class="c19 lst-kix_vy14fvvk8xlp-0 start"><li class="c0 li-bullet-0"><span class="c1">... Typical timeline is after navigation we block rendering while loading scripts and stylesheets</span></li><li class="c0 li-bullet-0"><span class="c1">... While we have a mechanism it has some drawbacks</span></li><li class="c0 li-bullet-0"><span class="c1">... Not browser specified behavior in all cases</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 221.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(42).png" style="width: 624.00px;<b> height</b>: 221.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... e.g. does requestAnimationFrame() fire? &nbsp;Should only be when rendering</span></li><li class="c0 li-bullet-0"><span class="c1">... Only supports stylesheets and scripts, may want to block on other resources</span></li><li class="c0 li-bullet-0"><span class="c1">... Only supports parser-inserted resources, resources inserted by script we don't have any way to block render on it</span></li><li class="c0 li-bullet-0"><span class="c1">... Proposal:</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 274.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(43).png" style="width: 624.00px;<b> height</b>: 274.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Makes it explicitly render-blocking, or on preload/script</span></li><li class="c0 li-bullet-0"><span class="c1">... One major use-case is to eliminate layout shift caused by webfonts</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 136.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(44).png" style="width: 624.00px;<b> height</b>: 136.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Fallback font comes in first while loading</span></li><li class="c0 li-bullet-0"><span class="c1">... Then we font swap once it comes in, causing layout shift</span></li><li class="c0 li-bullet-0"><span class="c1">... By renderblocking on font, we're not rendering anything with font</span></li><li class="c0 li-bullet-0"><span class="c1">... Second use-case is renderblocking on async script</span></li><li class="c0 li-bullet-0"><span class="c1">... By default it doesn't block parser but we don't know where/when it's executed</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 200.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(45).png" style="width: 624.00px;<b> height</b>: 200.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... A/B testing frameworks that is not that important so it doesn't have to block parsing but we'd like to be executed before rendering starts so we can do some tasks</span></li><li class="c0 li-bullet-0"><span class="c1">... So we can setup to measure metrics in rendering</span></li><li class="c0 li-bullet-0"><span class="c1">... Prevent FOUC for loader scripts</span></li><li class="c0 li-bullet-0"><span class="c1">… &lt;shows flash of unstyled content when a site loads&gt;</span></li><li class="c0 li-bullet-0"><span class="c1">… The website is using a loader script so that the stylesheet and scripts are not parser-inserted so they don’t block rendering, which is bad visually.</span></li><li class="c0 li-bullet-0"><span class="c1">… With the renderblocking attribute we can easily solve this by adding it to script inserted stylesheets</span></li><li class="c0 li-bullet-0"><span class="c1">… As a prerequisite we’d need to define what is “render blocking”</span></li><li class="c0 li-bullet-0"><span class="c1">… Proposal is to have the UA enter a render-blocking period after navigation and have that period end when all render blocking resources have loaded</span></li><li class="c0 li-bullet-0"><span>… side-product: have a before-render listere</span><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 329.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-27 at 19.42.13.png" style="width: 624.00px;<b> height</b>: 329.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">Could examine when the rendering starts or what resources have loaded by then</span></li><li class="c0 li-bullet-0"><span class="c1">Technical details - it’s a boolean attribute, has to be on elements in the &lt;head&gt; and inserted before the body parsing starts. Doesn’t care if element is parser inserted.</span></li><li class="c0 li-bullet-0"><span class="c1">… link has to be stylesheet or preload, on script it mustn’t be defer</span></li><li class="c0 li-bullet-0"><span class="c1">… The other attributes should allow the element to be fetched, e.g. shouldn’t be disabled</span></li><li class="c0 li-bullet-0"><span class="c1">… media attribute evaluates to true, etc</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 382.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-27 at 19.44.35.png" style="width: 624.00px;<b> height</b>: 382.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">… renderblocking=false - can be used for async styles, but can be done today with hacks</span></li><li class="c0 li-bullet-0"><span class="c1">… considered adding a timeout, let’s developers decide on the UX, but hard to decide what the value should be</span></li><li class="c0 li-bullet-0"><span class="c1">… RE the proposal to synchronize milestones on page lifetimes, that’s a larger scope problem</span></li><li class="c0 li-bullet-0"><span>… </span><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 349.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-27 at 19.47.44.png" style="width: 624.00px;<b> height</b>: 349.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">… Web fonts need to be as fast and stable as local fonts, but that’s not achievable</span></li><li class="c0 li-bullet-0"><span class="c1">… We want no layout shift and no delay, but that’s impossible</span></li><li class="c0 li-bullet-0"><span class="c1">… font display optional can give us that, but the font is not guaranteed to be used</span></li><li class="c0 li-bullet-0"><span class="c1">Layout shift can be minimized with size-adjust but not eliminated.</span></li><li class="c0 li-bullet-0"><span class="c1">This proposal enabled us to achieve consistency with delays</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Andy</b>: Coming back to font trilemma, why would someone choose render-blocking over font-display:block for example</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Xiaocheng</b>: font-display:block doesn't prevent rendering for the entire page</span></li><li class="c0 li-bullet-0"><span class="c1">... The blank space is measured with a fallback font</span></li><li class="c0 li-bullet-0"><span class="c1">... So when webfont is loaded, we need to swap fonts</span></li><li class="c0 li-bullet-0"><span class="c1">... So reserved space may get bigger or smaller</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: A complement to the platform to use-cases you mention. &nbsp;Couple places to make it more extensible, mentioning my proposal for milestones, differences for "before" milestones is that you're not implying any loading semantics when it comes to scripts</span></li><li class="c0 li-bullet-0"><span class="c1">... Relying on folks to add async attribute, may be interesting to have first semantics but have them be applied before first render</span></li><li class="c0 li-bullet-0"><span class="c1">... If you have multiple scripts they will run in-order vs. async which is race-y and problematic as Pat earlier described</span></li><li class="c0 li-bullet-0"><span class="c1">... Might be interesting to think about that</span></li><li class="c0 li-bullet-0"><span class="c1">... How much complexity would it add to the proposal?</span></li><li class="c0 li-bullet-0"><span class="c1">... Other point, from a syntax perspective for mPulse they're wanting their RUM loading script to load as soon as possible, but not block any of the events</span></li><li class="c0 li-bullet-0"><span class="c1">... For that kind of script, not just renderblocking=false but loadblocking=false</span></li><li class="c0 li-bullet-0"><span class="c1">... Maybe "blocking=render" it could be "blocking=none" or "blocking=onload"</span></li><li class="c0 li-bullet-0"><span class="c1">... Could give more leeway with future extensions</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Xiaocheng</b>: Broaden scope of proposal</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: I was thinking the same thing. This is focused on rendering but a related use case is a JS library that doesn't want to block the load event. A future extension would be great.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Simon</b>: I quite like the proposal and it seems like a useful feature. On the topic of future extensions - if we want to do that, we shouldn’t be using a boolean attribute, as current browsers would treat it as a true value and it wouldn’t be future compatible.</span></li><li class="c0 li-bullet-0"><span class="c1">… It should be an enumerated attribute and that would give us more control on what happens with unknown values, for better future compatibility</span></li><li class="c0 li-bullet-0"><span class="c1">… It depends on what we want the fallback behavior to be in future extensions</span></li><li class="c0 li-bullet-0"><span class="c1">… One other thought- the explainer brings up progressive JPEGs as a use case for the timeout extension and my reaction is that a timeout may not be the best way to solve for that. Maybe a “block until image metadata is loaded”, etc instead of waiting on a timeout</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Xiaocheng</b>: would like this to work also on other resources, but for images, we may want to unblock it once certain progress is passed, but hard to define that.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Simon</b>: The spec has a concept of knowing the dimensions before loading the full image. So defining is possible.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: A comment - appreciate the last slide with the trilema for fonts. It’d be very interesting to see data on sites that implemented this, improving something like CLS and what was the impact elsewhere. Would be great to see with data if this is helpful or just providing a footgun. </span></li><li class="c0 li-bullet-0"><span class="c1">… This can be dangerous to give 3Ps the ability to render block the content.</span></li><li class="c0 li-bullet-0"><span class="c1">… Great proposal, but would love to see the impact as a whole</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Aram</b>: Cliff made a good point. The idea of 3Ps implementing this may do so against the will of the site owner, and there’s a high risk for that. It may make sense to add a permission policy so that only 1Ps can set that attribute. I like it overall. I like the timeout approach and I can see how it can be useful for both development and production.</span></li><li class="c0 li-bullet-0"><span class="c1">… It can also put pressure on ill-performing 3Ps, especially if that timeout is trackable.</span></li><li class="c0 li-bullet-0"><span class="c1">… Being render blocking takes pressure off 3Ps and a timeout puts the pressure back on.</span></li></ul><p class="c3"><span class="c1"></span></p><h2 class="c29" id="h.glex7ka68pwu"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1eJWmxXx1PmNHedX7qw00nDGMCXnfMhd4pPFZd0WbDSo/edit%23slide%3Did.p&amp;sa=D&amp;source=editors&amp;ust=1637836983586000&amp;usg=AOvVaw2cadcPETiaYZBGww4b_Yr0">Adopting incubations &amp; spec status</a></span><span class="c22">&nbsp;- Yoav Weiss</span></h2><h3 class="c2" id="h.jetm0ff2p5ia"><span>Summary</span></h3><ul class="c19 lst-kix_nbzs3aql55ir-0 start"><li class="c0 li-bullet-0"><span class="c1">Interest in adoption for EventTiming and LCP =&gt; Yoav will send CfCs</span></li><li class="c0 li-bullet-0"><span class="c1">Interest in adoption for ElementTiming, but we concluded we’d discuss further on a future call</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Layout Instability</b>: Chrome team to share implementation experience on a future call</span></li><li class="c0 li-bullet-0"><span><b>IsInputPending</b>: Blocked on </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/WICG/is-input-pending/issues/44&amp;sa=D&amp;source=editors&amp;ust=1637836983587000&amp;usg=AOvVaw20Fsj9KcHRuYm6ZaQOSEDa">issue 44</a></span></li><li class="c0 li-bullet-0"><span class="c1"><b>Interesting but too early to adopt</b>: Memory measurement, Scheduling APIs, JS profiling</span></li></ul><h3 class="c2" id="h.axak6993dzq7"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_1dcmsdrcn8h-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Previous discussion about a year ago on incubations</span></li><li class="c0 li-bullet-0"><span class="c1">... Conclusions was people needed more time with incubations to see if Working Group has consensus on adopting or not</span></li><li class="c0 li-bullet-0"><span class="c1">... A year has passed so interesting to go through incubations and see what people think</span></li><li class="c0 li-bullet-0"><span class="c1">... See if there's appetite for adoption</span></li><li class="c0 li-bullet-0"><span class="c1">... I can start CfC process</span></li><li class="c0 li-bullet-0"><span class="c1">... Event Timing</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 509.00px;<b> height</b>: 192.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(46).png" style="width: 509.00px;<b> height</b>: 192.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Issue on Github to gather support</span></li><li class="c0 li-bullet-0"><span class="c1">... Major change here is Mozilla prototyping</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: We're OK with this now, thanks for waiting</span></li><li class="c0 li-bullet-0"><span class="c1">... We're still working on it, but from Issues concern has gone down and we're OK with this</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Some concerns with how it integrates with DOM spec. &nbsp;Currently ends up monkey-patching the dispatch algorithm to add timestamps here and there. &nbsp;What's the plan there?</span></li><li class="c0 li-bullet-0"><span class="c1">... Historic problem where webperf specs don't specify principals</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Ideally I think we'd figure out a way to create hooks in DOM that call into algorithms in EventTiming or vice-versa</span></li><li class="c0 li-bullet-0"><span class="c1">... Integration points that are not monkey-patch</span></li><li class="c0 li-bullet-0"><span class="c1">... As part of move from WICG to Working Group we can take on that work</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: Historically we've taken approach to monkey patch while incubating and once it's more material we can send relevant PRs</span></li><li class="c0 li-bullet-0"><span class="c1">... Need to accepting positions, so we can move forward</span></li><li class="c0 li-bullet-0"><span class="c1">... HTML is it possible to have properties for Window outside of HTML spec</span></li><li class="c0 li-bullet-0"><span class="c1">... As well as hook to update rendering for event duration, we'd add that similar to how we added it for PaintTiming</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Generally adding new globals is fine, small issues around ordering, we have those all order</span></li><li class="c0 li-bullet-0"><span class="c1">... Partial interfaces all over, haven't yet become a problem</span></li><li class="c0 li-bullet-0"><span><b>Yoav</b>: From Admin POV, I'll send out a new CfC for that to see if there's any objections from other members. &nbsp;If not, we can pull spec in.</span></li><li class="c0 li-bullet-0"><span class="c1">... ElementTiming</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 491.00px;<b> height</b>: 199.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(47).png" style="width: 491.00px;<b> height</b>: 199.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... If I remember correctly the position issue was leaning toward prototyping but didn't make a concrete position on that</span></li><li class="c0 li-bullet-0"><span class="c1">... Any updates from Mozilla?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: We're in a better place here than last year</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Is Apple on the call?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: I'm looking up history of this, not on top of my mind</span></li><li class="c0 li-bullet-0"><span class="c1">... Found history of EventTiming position, and it seems like we think that there are too many proposals solving similar problems</span></li><li class="c0 li-bullet-0"><span class="c1">... Lack of clarity on #91 for EventTiming on concurrent definition of First Input is unclear</span></li><li class="c0 li-bullet-0"><span class="c1">... I'll have to look for ElementTiming</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: #91 was closed, so re-open if it's still an issue</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: You're right, seems no longer an issue</span></li><li class="c0 li-bullet-0"><span class="c1">... No hard objection, just general "we need to examine use-cases" and solve for that</span></li><li class="c0 li-bullet-0"><span class="c1">... Also seems like with EventTiming people are moving forward, so that has impact</span></li><li class="c0 li-bullet-0"><span><b>Yoav</b>: There's a thread (</span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://www.mail-archive.com/webkit-dev@lists.webkit.org/msg29850.html&amp;sa=D&amp;source=editors&amp;ust=1637836983592000&amp;usg=AOvVaw3bPnsxKDy_BAXGZ2e53J60">https://www.mail-archive.com/webkit-dev@lists.webkit.org/msg29850.html</a></span><span class="c1">)</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: For ElementTiming, there are some issues but they're mostly addressable, we might have a security problem with Decode API</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Interesting outcome, I'm planning on talking later today about LCP and animated images and hoping to expose more timestamps.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: Re: ElementTiming, post to webkit-dev email list last Oct 30th 2021, we're concerned how this exposes paint timing, and the definition of set of known text nodes is unclear, and this API seems to expose significant runtime and memory cost</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Sean</b>: We didn't see huge overhead, not sure if Chromium folks saw something</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: We didn't see anything either, we only need to compute any of the attributes when developer explicitly adds Element Timing attributes to node</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: That's encouraging</span></li><li class="c0 li-bullet-0"><span class="c1">... But the paint timing exposure is still a concern</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: Not clear about specific concern, but for images we do gate it on TAO. &nbsp;We can already infer some of that information from decode API.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Is this mostly a privacy concern around exposure?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: I think it's a privacy concern, not completely sure, just reading things</span></li><li class="c0 li-bullet-0"><span class="c1">... Seems like there's a way to use this API to determine when things are painted more-or-less, privacy concern</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Would it make sense to schedule a separate session in a weekly call to talk through the specific concern</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Would you want to see horizontal review by privacy group</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Review would be significantly later down the road, not typically at adoption but later phases when moving to CR</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anne</b>: Let's do research and come back</span></li><li class="c0 li-bullet-0"><span><b>Yoav</b>: Followup on WG calls</span></li><li class="c0 li-bullet-0"><span class="c1">... Layout Instability</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 559.00px;<b> height</b>: 198.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(48).png" style="width: 559.00px;<b> height</b>: 198.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Worthwhile to adopt?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Have not prototyped, more we look at it the more concerned we are about performance implications, want to prototype more before WG adoption</span></li><li class="c0 li-bullet-0"><span class="c1">... Agree useful and cool thing, but significant concerns have come up</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Make sense to have WG discussion to share Chromium experience to see if there are parallels you can draw from, or just do work internally and come back later?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Yeah if you want to share we'd love to hear it</span></li><li class="c0 li-bullet-0"><span><b>Yoav</b>: Will organize that</span></li><li class="c0 li-bullet-0"><span class="c1">... LCP</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 552.00px;<b> height</b>: 224.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(49).png" style="width: 552.00px;<b> height</b>: 224.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: Nothing internally on LCP, but LayoutStability</span></li><li class="c0 li-bullet-0"><span class="c1">... Bookkeeping for LayoutInstabiliy seems burdensome for implementors, but may be done</span></li><li class="c0 li-bullet-0"><span class="c1">... Animations may not be handled correctly, jank during user interaction may go undetected</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: In terms of "during interaction", if that's related to hadRecentInput, they're still tracked then, but it's just interpretation if they're important by developer</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Scott</b>: Feedback from a consumer of these metrics, LCP has been very helpful for us to detect slow Ajax calls in particular. &nbsp;We're already using it as one of our key metrics for latency, because we can't find something comparable</span></li><li class="c0 li-bullet-0"><span class="c1">... Correlates to our own analysis for when a page is ready</span></li><li class="c0 li-bullet-0"><span class="c1">... If not standard, teams will optimize just for browsers that have it</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: In terms of LCP, do Mozilla folks see it tied to ElementTiming for adoptions</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: For implementation perspective for sure</span></li><li class="c0 li-bullet-0"><span class="c1">... Positions have softened for LCP, clearly useful, lot of spec work went in over the last year</span></li><li class="c0 li-bullet-0"><span><b>Yoav</b>: Does it make sense for me to revive the CfC, or is that too early?</span></li><li class="c0 li-bullet-0"><span class="c1">... isInputPending</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 568.00px;<b> height</b>: 199.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(50).png" style="width: 568.00px;<b> height</b>: 199.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Mozilla has an open bug blocking this, issue#44</span></li><li class="c0 li-bullet-0"><span>... </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://github.com/WICG/is-input-pending/issues/44&amp;sa=D&amp;source=editors&amp;ust=1637836983597000&amp;usg=AOvVaw3yc1v5CtwHxr_NkPiQ0--N">https://github.com/WICG/is-input-pending/issues/44</a></span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Is Andrew on the call today?</span></li><li class="c0 li-bullet-0"><span class="c1">... Useful feedback, and I think we can definitely bug folks to see how this would be better defined</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: If this can be figured out in the spec then Mozilla is a yes</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: We continue to be opposed due to click-jacking and cross-origin IFRAME cases</span></li><li class="c0 li-bullet-0"><span class="c1">... Cross-origin IFRAME that then moves, unclear if click-jacking can be prevented</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: A lot of work went into clear up that area in Chrome implementation before shipping</span></li><li class="c0 li-bullet-0"><span class="c1">... Might be worthwhile to take a second look</span></li><li class="c0 li-bullet-0"><span class="c1">... Next step would be to fix up issue#44.</span></li><li class="c0 li-bullet-0"><span>... </span><span>If you could document your issues in Github that would be useful</span></li><li class="c0 li-bullet-0"><span class="c1">... Then we could have a session where we could talk through this</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: List of other incubations that have been discussed in the group</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 294.00px;<b> height</b>: 290.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(51).png" style="width: 294.00px;<b> height</b>: 290.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Don't have time to talk about all of those specifically</span></li><li class="c0 li-bullet-0"><span class="c1">... In particular Post-Task that Scott talked about multiple times on calls, having more granular userland coordinated scheduling has shown promise</span></li><li class="c0 li-bullet-0"><span class="c1">... Compression Streams discussed yesterday in terms on zstandard</span></li><li class="c0 li-bullet-0"><span class="c1">... Computer pressure newer and possibly more controversial</span></li><li class="c0 li-bullet-0"><span class="c1">... If you think other incubations could be interest to adopt, let me know</span></li><li class="c0 li-bullet-0"><span class="c1">Benjamin:</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 256.00px;<b> height</b>: 122.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(52).png" style="width: 256.00px;<b> height</b>: 122.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: CfCs for those?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Too early, but implementation prototypes in Mozilla for those</span></li></ul><p class="c3"><span class="c1"></span></p><h2 class="c29" id="h.ribp47msejya"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1ltfVgbOxw0g43CfMkcDLBOKEX36bMrZk-vibKqDPokg/edit%23slide%3Did.p&amp;sa=D&amp;source=editors&amp;ust=1637836983600000&amp;usg=AOvVaw0veDMIgTN5dgnDo8cevroe">Content negotiation and Client Hints</a></span><span class="c22">&nbsp;- Yoav Weiss</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/7YfZkDKANA4&amp;sa=D&amp;source=editors&amp;ust=1637836983601000&amp;usg=AOvVaw0Tw7vqZv8-qxMTTJuFY1E1">Recording</a></span></p><h3 class="c2" id="h.sux91sucy2j7"><span>Summary</span></h3><ul class="c19 lst-kix_ynjmycy189zt-0 start"><li class="c0 li-bullet-0"><span class="c1">Presented the Client Hints infrastructure as a safer and more correct content negotiation mechanism</span></li><li class="c0 li-bullet-0"><span class="c1">Interest in the infrastructure from both potential consumers and browser vendors, but not necessarily in the WG</span></li><li class="c0 li-bullet-0"><span class="c1">Reminder that existing content negotiation mechanisms are heavily relied upon.</span></li></ul><h3 class="c2" id="h.qzq0zwdsv2jp"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_gnntovy9v4k5-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Want to talk about content negotiation and Client Hints</span></li><li class="c0 li-bullet-0"><span class="c1">... Project I’m involved in for many years, and in WG for many years, but for some reason those two worlds never collided</span></li><li class="c0 li-bullet-0"><span class="c1">... Wanted to talk to WG about that feature, and content negotiation in general</span></li><li class="c0 li-bullet-0"><span class="c1">... Content negotiation is a thing:</span></li></ul><ul class="c19 lst-kix_gnntovy9v4k5-1 start"><li class="c11 c21 li-bullet-0"><span class="c1">`Accept` for things the browser says it supports</span></li><li class="c11 c21 li-bullet-0"><span class="c1">`Accept-Encoding` for encodings</span></li><li class="c11 c21 li-bullet-0"><span class="c1">`User-Agent` - heavy hammer that's being used for content negotiation for different things</span></li><li class="c11 c21 li-bullet-0"><span class="c1">`Accept-Language` adapts site's content to user language when it's set</span></li></ul><ul class="c19 lst-kix_gnntovy9v4k5-0"><li class="c0 li-bullet-0"><span class="c1">... Server adopts response based on headers, not just URL</span></li><li class="c0 li-bullet-0"><span>... Also other forms of content negotiation that are </span><span>geographically based</span><span class="c1">, or other characteristics</span></li><li class="c0 li-bullet-0"><span class="c1">... At the same time, passive fingerprinting is also a thing</span></li><li class="c0 li-bullet-0"><span class="c1">... A lot of that information that the headers expose can be used for passive fingerprinting</span></li><li class="c0 li-bullet-0"><span class="c1">... Enabling servers to tell those users apart without having to do anything about it</span></li><li class="c0 li-bullet-0"><span class="c1">... As opposed to active fingerprinting, where the server actively asks for information</span></li><li class="c0 li-bullet-0"><span class="c1">... For example, when asking for info, security and privacy researchers and browsers can spot that fact</span></li><li class="c0 li-bullet-0"><span class="c1">... That brings us to Client Hints</span></li><li class="c0 li-bullet-0"><span class="c1">... It’s a content negotiation mechanism that limits amount of information sent by default</span></li><li class="c0 li-bullet-0"><span class="c1">... Limits passive fingerprinting</span></li><li class="c0 li-bullet-0"><span class="c1">... Asks for specific server opt-ins for things it needs</span></li><li class="c0 li-bullet-0"><span class="c1">... Has privacy advantage, as well as correctness advantage</span></li><li class="c0 li-bullet-0"><span class="c1">... Essentially, the client sends out a request to the server, initial request doesn't contain any high-entropy hints, but just some low-entropy ones that it sends by default</span></li><li class="c0 li-bullet-0"><span class="c1">... Server then asks for specific high-entropy hints</span></li><li class="c0 li-bullet-0"><span class="c1">... That opt-in is persistent for the browser's session</span></li><li class="c0 li-bullet-0"><span class="c1">... Following requests would contain those hints, and the server can do content negotiation based on that</span></li><li class="c0 li-bullet-0"><span class="c1">... Works great for subresources but less good for navigation responses</span></li><li class="c0 li-bullet-0"><span class="c1">... Not sent to cross-origin contexts by default</span></li><li class="c0 li-bullet-0"><span class="c1">... Requires Permission Policy-based delegation for cross-origin resources</span></li><li class="c0 li-bullet-0"><span class="c1">... Top-level origin needs to delegate to other origins if it wishes to do so</span></li><li class="c0 li-bullet-0"><span class="c1">... In order to resolve the very first request issue, related proposal called Client Hints Reliability</span></li><li class="c0 li-bullet-0"><span class="c1">... Parallel Critical-CH response header that origin prefers a redirect over getting the response wrong</span></li><li class="c0 li-bullet-0"><span class="c1">... Important for correctness issues, once we use CH beyond just an optimization</span></li><li class="c0 li-bullet-0"><span class="c1">... Avoid issues even in the case of a redirect</span></li><li class="c0 li-bullet-0"><span class="c1">... Separate proposal called ALPS and ACCEPT_CH HTTP frame</span></li><li class="c0 li-bullet-0"><span class="c1">... Negotiates hints as part of H/2 or H/3 SETTINGS phase</span></li><li class="c0 li-bullet-0"><span class="c1">... Stealing a RTT and avoids a redirect</span></li><li class="c0 li-bullet-0"><span class="c1">... In terms of privacy, information exposed with Client Hints is information that should be regarded as active information exposure as it requires an opt-in</span></li><li class="c0 li-bullet-0"><span class="c1">... Browser could refuse to send that information, or lie in weird cases (not currently happening)</span></li><li class="c0 li-bullet-0"><span class="c1">... Don't expose anything new that isn't exposed normally otherwise</span></li><li class="c0 li-bullet-0"><span class="c1">... Responsive images</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 387.00px;<b> height</b>: 342.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(53).png" style="width: 387.00px;<b> height</b>: 342.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... User Agent client hints break apart UA string into various fields</span></li><li class="c0 li-bullet-0"><span class="c1">... Network information is something we've discussed in the past</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 390.00px;<b> height</b>: 262.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(54).png" style="width: 390.00px;<b> height</b>: 262.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">And a few more:</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 365.00px;<b> height</b>: 224.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(55).png" style="width: 365.00px;<b> height</b>: 224.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Thinking about Accept header as it's getting longer and violates CORS restrictions</span></li><li class="c0 li-bullet-0"><span class="c1">... One recent example that came up is font negotiation </span></li><li class="c0 li-bullet-0"><span class="c1">... Some developers want to send dedicated CSS per font technology</span></li><li class="c0 li-bullet-0"><span class="c1">... For new and exciting font formats, it can get hefty and would like to avoid it</span></li><li class="c0 li-bullet-0"><span class="c1">... Font format negotiation can be supported by browser in `Accept` headers is not exposed to the CSS request</span></li><li class="c0 li-bullet-0"><span class="c1">... May be better to try to fix that with Client Hints</span></li><li class="c0 li-bullet-0"><span class="c1">... Where the server would explicitly indicate which format it is interested in supporting</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 572.00px;<b> height</b>: 183.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(56).png" style="width: 572.00px;<b> height</b>: 183.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: We have been looking at something that could be served like something like this</span></li><li class="c0 li-bullet-0"><span class="c1">... Concept of something like reduced experience or quality mode</span></li><li class="c0 li-bullet-0"><span class="c1">... Identifying low-end scenarios and intentionally delivering a limited experience</span></li><li class="c0 li-bullet-0"><span class="c1">... Avoiding/reducing quality of images</span></li><li class="c0 li-bullet-0"><span class="c1">... Replacing background videos with still images and stuff like that</span></li><li class="c0 li-bullet-0"><span class="c1">... Problematic as ideally images are specified in HTML response, don't want to use JavaScript as it delays download</span></li><li class="c0 li-bullet-0"><span class="c1">... Gets worse instead of better</span></li><li class="c0 li-bullet-0"><span class="c1">... For images, if CDN understands this part of the request header, it can serve back different image that's lower quality</span></li><li class="c0 li-bullet-0"><span class="c1">... e.g. replacing video with a still image</span></li><li class="c0 li-bullet-0"><span class="c1">... Interesting and I like the concept</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Would like to see more on device capability front?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Battery, dark mode, etc</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Eric</b>: As a consumer of Client Hints, for responsive image solutions, Cloudinary loves Client Hints.</span></li><li class="c0 li-bullet-0"><span class="c1">…Taking complexity out of markup, and moving it to the server, accomplishes a number of things:</span></li><li class="c0 li-bullet-0"><span class="c1">…It makes things simpler for authors, who no longer have to author srcsets (or pre-generate resources)</span></li><li class="c0 li-bullet-0"><span class="c1">…It allows resource selection logic to update over time, evolving in step with best practices, and adapting to new inputs (e.g., bandwidth/rtt), without requiring markup changes</span></li><li class="c0 li-bullet-0"><span class="c1">…It allows resource generation and selection to be informed by image content (e.g., making different decisions for photographic vs non-photographic images)</span></li><li class="c0 li-bullet-0"><span class="c1">…It allows resource generation to be informed by incoming requests (so we generate a set of resources people would actually benefit from)</span></li><li class="c0 li-bullet-0"><span>…I hope to do some more work quantifying some of these gains</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Sergio</b>: I was wondering if there are any plans or possibility exists for browser functionality of ECMAScript level, solve some issues with differential builds</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Short answer is it can be. &nbsp;Client Hints not the issue, but what "level of support X" means</span></li><li class="c0 li-bullet-0"><span class="c1">... Lengthy thread on HTML pitching a markup-based solution</span></li><li class="c0 li-bullet-0"><span class="c1">... The main problem there is reaching consensus on what different levels mean</span></li><li class="c0 li-bullet-0"><span class="c1">... A problem today and not one we have solved yet</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: Our position is often misinterpreted: Client Hints sounds great, a replacement for User Agent is needed and wonderful, we just disagree what parts of it can be trivially queried.</span></li><li class="c0 li-bullet-0"><span class="c1">... e.g. let's include the amount of memory on the device</span></li><li class="c0 li-bullet-0"><span class="c1">... That opposition should not be interpreted as opposition to Client Hints in general?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Do you see exposing memory from Client Hints different than JavaScript?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: No, both should be prevented</span></li><li class="c0 li-bullet-0"><span class="c1">... Things like DPR, that would be great</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Dark mode?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: Won't be able to answer the question</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: We can disagree what needs or needs not to be exposed in JavaScript</span></li><li class="c0 li-bullet-0"><span class="c1">... Are we OK to adopt CH infrastructure in WG, and talk about specific features later</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: I think so</span></li><li class="c0 li-bullet-0"><span class="c1">... Whether it's this group or a different group?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Agreed, not sure if CH is appropriate in WebPerf WG</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Opinions on what would be the right group?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Group on UA versioning in HTML?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nic</b>: Comment on the Accept header, I came across a similar issue when adopting AVIF</span></li><li class="c0 li-bullet-0"><span class="c1">… My server infra is sniffing the Accept header, but the CDN cache based on the accept header was cache busting, so the noise of the Accept header was going against me</span></li><li class="c0 li-bullet-0"><span class="c1">… Specific format support headers would’ve been better</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Ian</b>: In regards to Alex, I don't know if it responds directly to Webkit's concerns, with Permissions Policy the developer can block any high- or low- entropy hints with headers</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Katie</b>: As folks are thinking about this, that User-Agent detection and headers that are sent, these are deeply intertwined in multiple parts of our infrastructure. &nbsp;We take fingerprint of order and content of request headers, we identify bot traffic, DDOS attacks, etc.</span></li><li class="c0 li-bullet-0"><span class="c1">... UA detection not just on website for what to serve, data processing is in multiple layers</span></li><li class="c0 li-bullet-0"><span class="c1">... There's a long lead time for folks to take investment to change over how we do our UA detection in lots of different systems</span></li><li class="c0 li-bullet-0"><span class="c1">Yoav; Question for how browsers can differentiate appropriate logic from tracking</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Katie</b>: We use UA for proxy for what's available on the client, e.g. screen size, does it support touch, etc</span></li><li class="c0 li-bullet-0"><span class="c1">... Instead of using UA from proxy, getting that important data we need, sorting out what data comes as part of that navigation</span></li><li class="c0 li-bullet-0"><span class="c1">... Lot of work we do switching out HTML served to users based on UA</span></li><li class="c0 li-bullet-0"><span class="c1">... As long as there's really clear guidelines and lead time, for making switch from one to another</span></li></ul><h2 class="c29" id="h.f1qo12eczzhm"><span class="c22">User Preferences Media Features - Thomas Steiner</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/XYeOafm3N4A&amp;sa=D&amp;source=editors&amp;ust=1637836983613000&amp;usg=AOvVaw1_gNUB5vFJJ6nURK1jbqvH">Recording</a></span></p><h3 class="c2" id="h.9888xkgt9n2t"><span>Summary</span></h3><ul class="c19 lst-kix_44zor6ujv0yu-0 start"><li class="c0 li-bullet-0"><span class="c1">Thomas presented a quick live demo of Google Search using the `Sec-CH-Prefers-Color-Scheme` hint to adopt the site upon the first load, followed by questions around why `media` attribute on `link` wasn't enough to cater for the same use case (since an additional request is necessary, so you can't inline the CSS). </span></li><li class="c0 li-bullet-0"><span class="c1">It was pointed out that this could also improve accessibility (no motion on Apple Watch landing page, but CSS for motion is still loaded). </span></li><li class="c0 li-bullet-0"><span class="c1">Mozilla's (represented through Benjamin) stance was that they don't have an opinion right now. Apple's position (represented through Alex) was that since it's trivial to obtain the same info via JS, this new client hint doesn't cause an additional privacy issue.</span></li></ul><h3 class="c2" id="h.infanpd8gev9"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_z8fnyoihpe2u-0 start"><li class="c0 li-bullet-0"><span class="c1">Thomas:</span></li><li class="c0 li-bullet-0"><span class="c1">Google has a dark mode, you can see that through devtools by changing the appearance preferences</span></li><li class="c0 li-bullet-0"><span class="c1">…”auto” means you switch to night mode depending on the time</span></li><li class="c0 li-bullet-0"><span class="c1">… Sites that rely on the settings cannot rely on a cookie, as the “auto” mode can switch over time</span></li><li class="c0 li-bullet-0"><span class="c1">… Ideally, we want to deliver the smallest HTML possible, but can’t do that without knowing what color scheme the user may have</span></li><li class="c0 li-bullet-0"><span class="c1">… Google is a pretty lean site, but has a lot of CSS that depends on light vs dark mode.</span></li><li class="c0 li-bullet-0"><span class="c1">… We worked on exposing the user’s preferred color scheme as early as possible.</span></li><li class="c0 li-bullet-0"><span class="c1">… This requires the page to be loaded before we know that info, but we wanted to know that before the HTML is served.</span></li><li class="c0 li-bullet-0"><span class="c1">… Filtering on document requests, we can see that the server send a header `Accept-CH: sec-ch-prefers-color-scheme` and also marking it as a Critical-CH</span></li><li class="c0 li-bullet-0"><span class="c1">… Switching to light mode, you can see that the request indicates light mode and the site responded to that.</span></li><li class="c0 li-bullet-0"><span class="c1">… Idea is to take all user preferences we have in CSS and translate them into Client Hints</span></li><li class="c0 li-bullet-0"><span class="c1">… In Chromium we’ve implemented prefers-color-scheme</span></li><li class="c0 li-bullet-0"><span class="c1">… Got an explainer, ran through a TAG review</span></li><li class="c0 li-bullet-0"><span class="c1">… Trying to get a holistic view on this</span></li><li class="c0 li-bullet-0"><span class="c1">… Using this at google.com and coming to youtube, avoid a flash of light theme</span></li><li class="c0 li-bullet-0"><span class="c1">… Hoping for other vendor interest, because at scale it makes a difference.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Anthony</b>: why is media attribute not sufficient?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Thomas</b>: The CSS is inlined to improve performance, so the link element’s media is not sufficient.</span></li><li class="c0 li-bullet-0"><span class="c1">… It could be enough for most pages, but not for high-traffic ones</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Eric</b>: subresources are also a thing that can benefit from this</span></li><li class="c0 li-bullet-0"><span class="c1">… Images can also differ based on dark/light mode</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Thomas</b>: Picture could use the media attribute, but cannot inline</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Eric</b>: No control over the markup, but have control over subresource serving</span></li><li class="c0 li-bullet-0"><span class="c1">… So modifying images based on that seems cool</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Thomas</b>: There’s also page experience difference for prefers-reduced-motion, so it may be interesting for apple.com to not load the motion related code when it’s not needed.</span></li><li class="c0 li-bullet-0"><span class="c1">… Idea is to expose CSS MQ preferences as client hints.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Michal</b>: The example about the a11y feature shows that your choices are either to delay the response or load the lowest common denominator.</span></li><li class="c0 li-bullet-0"><span class="c1">… For the a11y case, a heavy version is likely to be loaded and then unused.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Thomas</b>: Saw people comment on the apple watch landing page and investigated it. Saw throttling when not using reduced motion.</span></li><li class="c0 li-bullet-0"><span class="c1">.. asked for Apple and Mozilla positions</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: no position ATM</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Alex</b>: I agree that it’s trivially queryable if dark mode, so I don’t think putting it in a client hint is an additional privacy problem.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Thomas</b>: To add to the privacy question, Brave tells pages that you prefer light mode even if you're in dark mode. So you could lie in MQs as well as CH.</span></li></ul><p class="c3 c37"><span class="c1"></span></p><h2 class="c29" id="h.rudaey4ntcqb"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/13M1s-z-yw13OeYP67dcAo-T34dbB-8wOAMkgXaLytm0/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1637836983619000&amp;usg=AOvVaw17VMKxJundzQyfDdl5bCss">Personalizing Performance</a></span><span>&nbsp;- </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://www.linkedin.com/in/nitinpasumarthy/&amp;sa=D&amp;source=editors&amp;ust=1637836983620000&amp;usg=AOvVaw0PtKmXfGt7tMW3vcgIZccC">Nitin Pasumarthy</a></span><span>, </span><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://www.linkedin.com/in/pvijayanathan/&amp;sa=D&amp;source=editors&amp;ust=1637836983620000&amp;usg=AOvVaw0ACO4G-nsRZ4qfboP7w6Ew">Prasanna Vijayanathan</a></span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/rmsXC7zXIus&amp;sa=D&amp;source=editors&amp;ust=1637836983621000&amp;usg=AOvVaw1CGJQ-SCiNCQdtBzIlUse7">Recording</a></span></p><h3 class="c2" id="h.ubrpdzti0pbg"><span class="c18 c10">Summary</span></h3><ul class="c19 lst-kix_cb33oapgqo2g-0 start"><li class="c0 li-bullet-0"><span>Performance affects user engagement. But sometimes a one size fits all optimization may not be optimal. LinkedIn Lite used Netinfo’s ECT class to dynamically pick image resolutions on feed. Though the online A/B results were positive, this approach had several drawbacks. Netinfo was unavailable on iOS, 80% of users were marked under a single bucket which limited its use, </span><span>doesn't</span><span class="c1">&nbsp;account for client / device performance and doesn’t differentiate CDN versus data center performance.</span></li><li class="c0 li-bullet-0"><span class="c1">LinkedIn’s performance team designed a deep neural network model to predict the expected page load time (PLT) class using low entropy features like country, OS info, browser info and ASN. These results were better than NetInfo’s as expected.</span></li><li class="c0 li-bullet-0"><span>They plan to open source this generalized PLT predictor model and also publish a blog on how a performance / frontend engineer can productionize it easily with node.js and use it to personalize their company’s performance at scale!</span></li></ul><h3 class="c2" id="h.nk0ipbw1lru6"><span>Minutes</span></h3><ul class="c19 lst-kix_a603rvteeny0-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Nitin</b>: would like to share our work (Nitin from Linkedin and Prasanna from Netflix)</span></li><li class="c0 li-bullet-0"><span class="c1">… How we personalized the experience of Linkedin through 2 approaches:</span></li><li class="c0 li-bullet-0"><span class="c1">… Using netinfo and experience using it</span></li><li class="c0 li-bullet-0"><span class="c1">... and solved those challenges through ML, how we can personalize performance</span></li><li class="c0 li-bullet-0"><span class="c1">… Linkedin lite is a performance-first site. Want to load 90%ile under 6 seconds</span></li><li class="c0 li-bullet-0"><span class="c1">… All testing is on 2G networks and the site is SSRed</span></li><li class="c0 li-bullet-0"><span class="c1">… First experiment was adapting the image resolutions</span></li><li class="c0 li-bullet-0"><span class="c1">… Linkedin Lite was designed to work for everyone, and wanted to double the size of images to people that can “afford” it from a network perspective</span></li><li class="c0 li-bullet-0"><span class="c1">… Why personalize images - it really drives engagement</span></li><li class="c0 li-bullet-0"><span class="c1">… First approach - NetInfo and on-device measurements</span></li><li class="c0 li-bullet-0"><span class="c1">… Used the API to only view high quality images when the connection was 4G</span></li><li class="c0 li-bullet-0"><span class="c1">… Server side used the netinfo information sent from the client for quality classification and send suitable resolution</span></li><li class="c0 li-bullet-0"><span class="c1">… And then requests to the image provider are for the appropriate images</span></li><li class="c0 li-bullet-0"><span>… Results </span><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 297.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-28 at 18.49.39.png" style="width: 624.00px;<b> height</b>: 297.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">… pretty good results overall</span></li><li class="c0 li-bullet-0"><span class="c1">… but the downsides were: netinfo is not supported everywhere and iOS is a big share and is not supported</span></li><li class="c0 li-bullet-0"><span class="c1">… 80% of requests are marked as 4g, so we cannot do much to granularity find users with poor networks. Seemed odd.</span></li><li class="c0 li-bullet-0"><span class="c1">… Capped at 2Mbps, which is not future (present, even) proof</span></li><li class="c0 li-bullet-0"><span class="c1">… There was also a significant difference in the distribution between NEtInfo and LinkedIn’s API data</span></li><li class="c0 li-bullet-0"><span class="c1">… May be related to CDN perf vs. data centers, or to the type of requests</span></li><li class="c0 li-bullet-0"><span class="c1">… Netinfo covers the network, but wanted something that covers the device capabilities as well</span></li><li class="c0 li-bullet-0"><span class="c1">… wanted to use page load time to cover the experience more holistically</span></li><li class="c0 li-bullet-0"><span class="c1">… Performance as a Service</span></li><li class="c0 li-bullet-0"><span class="c1">… It’s hard to measure the user’s experience, and doing that in real-time is harder. Wanted to be able to modify pages based on that.</span></li><li class="c0 li-bullet-0"><span class="c1">… also wanted to have this starting from the very first request.</span></li><li class="c0 li-bullet-0"><span class="c1">… At a high level</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 336.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-28 at 18.55.24.png" style="width: 624.00px;<b> height</b>: 336.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">… Geo and network from IP addresses and device and browser info from User-Agent.</span></li><li class="c0 li-bullet-0"><span class="c1">… So we built the model and trained it offline based on RUM data</span></li><li class="c0 li-bullet-0"><span class="c1">… and got a correlation of the features to classes and came up with a complex model</span></li><li class="c0 li-bullet-0"><span class="c1">… results</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 268.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-28 at 18.56.44.png" style="width: 624.00px;<b> height</b>: 268.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">… better than the netinfo results</span></li><li class="c0 li-bullet-0"><span class="c1">… Very complex model</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 360.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/Screen Shot 2021-10-28 at 18.57.44.png" style="width: 624.00px;<b> height</b>: 360.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">… Hard to generalize this concept and build models at this scale, as we have a lot of data</span></li><li class="c0 li-bullet-0"><span class="c1">… Planning to open source this model soon, and explain why we think the model can work for any company</span></li><li class="c0 li-bullet-0"><span class="c1">… How do I deploy this model?</span></li><li class="c0 li-bullet-0"><span class="c1">… Article coming up on deploying this using tensorflow.js node</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: Awesome presentation and being open about sharing it is great. Curious on netinfo and other things you’re using. Any standards that you would improve to make this easier?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nitin</b>: From netinfo’s perspective, our ideal API would be based on entire page load time, and return granular information about downlink throughput, and break it down by CDNs and data centers. They are different in their perf characteristics.</span></li><li class="c0 li-bullet-0"><span class="c1">… If such an API could be built that would’ve been helpful</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Would be great if y’all worked with the NetInfo API folks to improve it. Also - what would happen when browsers start masking IP addresses and UA information?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nitin</b>: We’d see an immediate drop in accuracy from IP address masking. We’d lose the geography feature. We can try to compensate for it with getting the info from elsewhere.</span></li><li class="c0 li-bullet-0"><span class="c1">… Feature ranking - rank these features based on their impact</span></li><li class="c0 li-bullet-0"><span class="c1">… So when we did that ranking device and browser were the most important and less from IP address</span></li><li class="c0 li-bullet-0"><span class="c1">… But will continue to explore other real-time features</span></li><li class="c0 li-bullet-0"><span class="c1">… Would explore how to use less granular information.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: may be interesting to think about a coarse equivalent</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Eric</b>: How do you think about facts about the user’s connection (netinfo) vs. user preferences (savedata)?</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nitin</b>: Right now the model just gives the quality based on the model, but different teams use it for different things: chang images or some other changes.</span></li><li class="c0 li-bullet-0"><span class="c1">… haven’t considered taking user prefs to the model</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Prasanna</b>: the model didn’t use such features, but could be explored once the model is open sourced</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Nitin</b>: features like number of cores and device memory could be helpful, but we didn’t include them yet. We also don’t yet looking into RTT and throughput exposed by netinfo, but planning to look into it.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Prasanna</b>: Wanted to add that collaboration on netinfo - having smartness go into netinfo could move that processing to the client side.</span></li></ul><p class="c3"><span class="c1"></span></p><h2 class="c29" id="h.ly18vhvtbjxq"><span class="c4 c13"><a class="c8" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/18s1rovbBgPYeSNBzmUShjkqxROSAXsvYsoXlg36Fh1k/edit%23slide%3Did.p&amp;sa=D&amp;source=editors&amp;ust=1637836983628000&amp;usg=AOvVaw05Ub8BEvLHrV3tSLuzelFc">LCP updates</a></span><span class="c22">&nbsp;- Yoav Weiss</span></h2><p class="c11"><span class="c4"><a class="c8" href="https://www.google.com/url?q=https://youtu.be/yP0ZcqLM8gU&amp;sa=D&amp;source=editors&amp;ust=1637836983628000&amp;usg=AOvVaw1Y-MhQt2UenhNhxaSVVpUr">Recording</a></span></p><h3 class="c2" id="h.azu422idht7l"><span>Summary</span></h3><ul class="c19 lst-kix_b6gyq8ilc0v0-0 start"><li class="c0 li-bullet-0"><span class="c1">Presented various efforts to improve LCP</span></li><li class="c0 li-bullet-0"><span class="c1">Positive feedback on the metrics (correlates with business metrics)</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Missing point for improvement</b>: inline SVG elements should be counted for LCP</span></li><li class="c0 li-bullet-0"><span class="c1">Otherwise, there’s clear need to fix background image heuristics</span></li></ul><h3 class="c2" id="h.urda1qp2rt6n"><span class="c18 c10">Minutes</span></h3><ul class="c19 lst-kix_oeltg7yado54-0 start"><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Talked a lot about LCP in the past</span></li><li class="c0 li-bullet-0"><span class="c1">... Looking for updates or improvements or ways it can be better</span></li><li class="c0 li-bullet-0"><span class="c1">... LCP has shipped in Chromium/Chrome for a while</span></li><li class="c0 li-bullet-0"><span class="c1">... Gathered data showing correlation with general performance</span></li><li class="c0 li-bullet-0"><span class="c1">... And now case studies showing high impact</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 325.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(57).png" style="width: 624.00px;<b> height</b>: 325.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Very strict A/B testing conditions show increased sales by 8% which is a lot</span></li><li class="c0 li-bullet-0"><span class="c1">... Clear studies showing high-impact for metric</span></li><li class="c0 li-bullet-0"><span class="c1">... At the same time, exposure in wild shows some gaps we need to better handle</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 246.67px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(58).png" style="width: 624.00px;<b> height</b>: 246.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Progressive images not accounted for, last frame of image is rendered, where other frames could be good enough</span></li><li class="c0 li-bullet-0"><span class="c1">... Similar situation with animated images that are auto-playing, first fully-rendered frame is good enough paint point other than waiting for full video/animation script to end</span></li><li class="c0 li-bullet-0"><span class="c1">... Videos are currently ignored, video posters are taken into account, where auto-playing ones are not. &nbsp;Discrepancy vs. animated images.</span></li><li class="c0 li-bullet-0"><span class="c1">... Canvas is currently ignored, maybe it shouldn't be</span></li><li class="c0 li-bullet-0"><span class="c1">... Background image heuristics are not ideal</span></li><li class="c0 li-bullet-0"><span class="c1">... There are also some loopholes, techniques making rounds to trick the metric</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 352.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(59).png" style="width: 624.00px;<b> height</b>: 352.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Good to cleanup from metric perspective</span></li><li class="c0 li-bullet-0"><span class="c1">... Ways that metric diverges from actual user experience and that's not great</span></li><li class="c0 li-bullet-0"><span class="c1">... For Progressive Images, a lot of discussion on a couple issues between folks from image compression community and folks working on LCP to try to figure out a way to account for progressive images</span></li><li class="c0 li-bullet-0"><span class="c1">... Looking for heuristics that can apply to progressive jpegs</span></li><li class="c0 li-bullet-0"><span class="c1">... Also JPEG-XL looking to the future, but not a current issue</span></li><li class="c0 li-bullet-0"><span class="c1">... Right now we're trying to get industry data on progressive images</span></li><li class="c0 li-bullet-0"><span class="c1">... Some teams saying we need to make sure metric is nudging folks towards the right behavior</span></li><li class="c0 li-bullet-0"><span class="c1">... Despite having opinions for/against progressive images in the community for 10+ years we have very little data showing progessive rendering is actually better than non-progressive rendering. &nbsp;I found no data.</span></li><li class="c0 li-bullet-0"><span class="c1">... Seems we should figure out that point before making a call on progressive images</span></li><li class="c0 li-bullet-0"><span class="c1">... Some research was done on that front, is highly contentious</span></li><li class="c0 li-bullet-0"><span class="c1">... I'd love to see data from folks serving images. &nbsp;See what's driving more engagement and getting happier users</span></li><li class="c0 li-bullet-0"><span class="c1">... Beyond progressive, there's Animated Images</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 503.00px;<b> height</b>: 356.00px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(60).png" style="width: 503.00px;<b> height</b>: 356.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Linked issue where we aim to report first full frame</span></li><li class="c0 li-bullet-0"><span class="c1">... Do we want a new attribute to expose that first frame?</span></li><li class="c0 li-bullet-0"><span class="c1">... Don't want to overwrite the current (final frame's) render time</span></li><li class="c0 li-bullet-0"><span class="c1">... When to report the LCP candidates? &nbsp;Right now high linkage between time entries reported and its actual render time</span></li><li class="c0 li-bullet-0"><span class="c1">... If it's the first frame time we'd consider “start time” for LCP, we may want to report the entry before it’s done and change it later. &nbsp;Tradeoffs either way.</span></li><li class="c0 li-bullet-0"><span class="c1">... Related to that, do we change current startTime from render time to first frame time</span></li><li class="c0 li-bullet-0"><span class="c1">... Similarly all those questions apply to videos</span></li><li class="c0 li-bullet-0"><span class="c1">... Plus do we want to report auto-looping videos for LCP candidates</span></li><li class="c0 li-bullet-0"><span class="c1">... My opinion is we do but would want to hear of any other concerns</span></li><li class="c0 li-bullet-0"><span class="c1">... Canvas is currently largely ignored, want to take draw-image calls into account</span></li><li class="c0 li-bullet-0"><span class="c1">... Maybe we can consider other canvas operations</span></li><li class="c0 li-bullet-0"><span class="c1">... Discussion worth having</span></li><li class="c0 li-bullet-0"><span class="c1">... Better aligning metric with UX, how to handle low-entropy images</span></li><li class="c0 li-bullet-0"><span class="c1">... e.g. Creating an infinitely large transparent SVG</span></li><li class="c0 li-bullet-0"><span class="c1">... Better detection for background images</span></li><li class="c0 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 205.33px;"><img alt="" src="./WebPerf WG @ TPAC 2021_files/pasted image 0(61).png" style="width: 624.00px;<b> height</b>: 205.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c0 li-bullet-0"><span class="c1">... Currently all things I'm actively looking into</span></li><li class="c0 li-bullet-0"><span class="c1">--- discussion ---</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: As you know we've had a lot of discussions around LCP, I would like to start by saying it seems to me part of the issue with LCP and all CWVs, simultaneously used to improve performance of webpages but also for SEO</span></li><li class="c0 li-bullet-0"><span class="c1">... A lot of these things around gaming metrics are because they're used for SEO, or trick contractors</span></li><li class="c0 li-bullet-0"><span class="c1">... If we didn't have this issue, used for performance purposes, we'd need to concern ourselves a lot less with gaming the system</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: To some extent. &nbsp;Metrics by definition is gamification of web performance. &nbsp;And when you gamify things, there can be cheating</span></li><li class="c0 li-bullet-0"><span class="c1">... Examples of folks out there that are cheating Lighthouse, which doesn't have SEO implications but it is perceived</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Perceived SEO possibly</span></li><li class="c0 li-bullet-0"><span class="c1">... With regard to low-res images, should have impact on metrics just not LCP</span></li><li class="c0 li-bullet-0"><span class="c1">... LCP is for when page is visually complete</span></li><li class="c0 li-bullet-0"><span class="c1">... Given existence of metrics like Speed Index, value in building up display gradually</span></li><li class="c0 li-bullet-0"><span class="c1">... Value in low-quality placeholders, just not as part of LCP</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Goal for progressive images is to not account for low-quality placeholders, but if you have 80% (for example) of progressive jpeg, the visual difference between that and 100% of the image may not be visible.</span></li><li class="c0 li-bullet-0"><span class="c1">... Created a benchmark that is not publicly available, and it is hard to tell apart images once a certain number of scans is there, tell apart that image from eventual image.</span></li><li class="c0 li-bullet-0"><span class="c1">... Question that I got that I don't have an answer for is, why don't people compress images to visually complete and not send more?</span></li><li class="c0 li-bullet-0"><span class="c1">... Goal is to not account for low quality placeholders, but for hardly-distinguishable from final image quality</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Would agree with that sentiment, maybe smaller images can be sufficient, if they’re good enough</span></li><li class="c0 li-bullet-0"><span class="c1">... On the front of background images </span></li><li class="c0 li-bullet-0"><span class="c1">... This heuristic of what image needs to be, is highly problematic</span></li><li class="c0 li-bullet-0"><span class="c1">... If you accept canvas, you should accept SVGs</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Different between SVG element and SVG images</span></li><li class="c0 li-bullet-0"><span class="c1">... Another point to address</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: They do account for FCP of course, discrepancy for FCP and LCP</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: Comment around gamification, any time you tie an incentive to a metric that's not tied to UX, you're going to see this. &nbsp;It's human nature. &nbsp;It's an outcome, but doesn't account for all other improvements others see.</span></li><li class="c0 li-bullet-0"><span class="c1">... It sucks but and we should go after snake-oil salesman</span></li><li class="c0 li-bullet-0"><span class="c1">... We shouldn't discount progress we're making</span></li><li class="c0 li-bullet-0"><span class="c1">... For progressive rendering especially, that's opinionated, maybe for starters look at median </span></li><li class="c0 li-bullet-0"><span class="c1">... In general my feedback would be we're seeing a lot of stories where this is having an impact on UX metrics and business outcomes</span></li><li class="c0 li-bullet-0"><span class="c1">... On whole LCP improving things</span></li><li class="c0 li-bullet-0"><span class="c1">... Still benefiting us for the greater good</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: One point on progressive rendering, it's very hard to do that in real time. &nbsp;Approach we're trying to take for progressive jpegs, regards number of bits for each pixel from overall 8-bits as a proxy for final quality. &nbsp;Can be computed relatively quickly. &nbsp;Can't do complex image analysis on the fly. &nbsp;Some heuristic-based.</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Cliff</b>: Understandable, more point that we can continue to make it harder to game, improve edge-cases and we'll see improvement across the board.</span></li><li class="c0 li-bullet-0"><span><b>Katie</b>: We have run experiments with progressive images, I don't have data at hand, but I can see about finding results and sharing it.</span></li><li class="c0 li-bullet-0"><span class="c1">... At least one we ran on iOS apps, we'd know if it improved conversion or not and business metrics</span></li><li class="c0 li-bullet-0"><span class="c1">... I can try to get more data</span></li><li class="c0 li-bullet-0"><span class="c1">... We love LCP out of all CWVs, has most correlation with business metrics</span></li><li class="c0 li-bullet-0"><span class="c1">... FID graphs all over the place, same for CLS</span></li><li class="c0 li-bullet-0"><span class="c1">... LCP clearly as bounce-rate goes up and conversion goes down</span></li><li class="c0 li-bullet-0"><span class="c1">... I'll have to talk to legal folks but will see what I can share more broadly with the community</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Comment about Canvas and SVG element</span></li><li class="c0 li-bullet-0"><span class="c1">... Big deal and I'd like to see SVG element support even without other nested SVG elements</span></li><li class="c0 li-bullet-0"><span class="c1">... Important and it's going to resolve some oddities with video and animated</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: I think the exclusion of SVG elements is just implementation complexities, not anything beyond</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Katie</b>: Since we're talking about that, we have an internal metric where logo renders, and we use inline SVG, a little annoying no good way for us to measure it with rAF() call and inline JS, but awesome if inline SVG were included</span></li><li class="c0 li-bullet-0"><span class="c1">... Marketing pages with inline SVG as header image</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: We can start with subset of SVG that allows for shapes and text would cover a lot of use-cases</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: Stress again how problematic the lack of distinction between foreground and background images.</span></li><li class="c0 li-bullet-0"><span class="c1">... Get decision and move from FMP to LCP, but reality where some sort of big background image that's not 100% of viewport is problematic</span></li><li class="c0 li-bullet-0"><span class="c1">... We're seeing lot of cases where images not important for page are being used as element for LCP</span></li><li class="c0 li-bullet-0"><span class="c1">... Another problem is around use of auto-playing animated galleries</span></li><li class="c0 li-bullet-0"><span class="c1">... WIX users use animated galleries</span></li><li class="c0 li-bullet-0"><span class="c1">... LCP would be second or third image in gallery which is artificially delayed, and that's a problem</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: Why isn't first image in gallery being picked</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: First image may have lower resolution, in some cases where galleries change size</span></li><li class="c0 li-bullet-0"><span class="c1">... Mostly about resolution</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: If you have specific examples and can open issues</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Dan</b>: We've resized downloaded image to fix resolution, but can open an issue</span></li><li class="c0 li-bullet-0"><span class="c1"><b>NPM</b>: We're aware heuristic for background images is not perfect. &nbsp;Hard for an arbitrary website. &nbsp;Based on the size is it the main content? &nbsp;Based on other characteristics, if it's clearly not, what could we use to determine it's not the main content on the page?</span></li><li class="c0 li-bullet-0"><span class="c1">... We've tried to fix carousel by not ignoring removed elements</span></li><li class="c0 li-bullet-0"><span class="c1">... But if you have smaller image then larger image in carousel, since it's a larger image and the user hasn't interacted</span></li><li class="c0 li-bullet-0"><span class="c1">... Hard to distinguish that vs. something else like image just loaded later</span></li><li class="c0 li-bullet-0"><span class="c1">... Github tracker for posting issues and things to do to improve metric</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Sergio</b>: Issue not directly a problem with metric itself. &nbsp;loading=lazy. &nbsp;In case of WordPress, core has started lazily loading images by default, could be cases where it's hero images or things that are LCP candidates</span></li><li class="c0 li-bullet-0"><span class="c1">... I don't know if that goes towards Nicholas's point where using "lazy" as a signal, I could see this going either way</span></li><li class="c0 li-bullet-0"><span class="c1">... Problem we've come across somewhat often</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Patrick</b>: Problem is when lazy gets slapped on everything, the actual Hero image may have Lazy on it. &nbsp;Bad for all sorts of reasons, if we use that as part of heuristic the problem would be ignored</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Yoav</b>: For my perspective, this is LCP is doing its job, signalling a real issue</span></li><li class="c0 li-bullet-0"><span class="c1">... Images loaded after layout</span></li><li class="c0 li-bullet-0"><span class="c1">... LCP is helping point to real issues</span></li><li class="c0 li-bullet-0"><span class="c1">... Complex setup for many people to get right</span></li><li class="c0 li-bullet-0"><span class="c1">... Solution is to fix loading=lazy to be more viewport-aware (no clear answer, current situation is not great)</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Benjamin</b>: Question not about LCP, how Web Vitals evolves?</span></li><li class="c0 li-bullet-0"><span class="c1">... When first presented, talked about how it would be updated every year</span></li><li class="c0 li-bullet-0"><span class="c1"><b>Annie</b>: What we said when we launched is we wouldn't update the set more than once a year</span></li><li class="c0 li-bullet-0"><span class="c1">... Ecosystem takes a long time to adjust to them</span></li><li class="c0 li-bullet-0"><span class="c1">... People will most likely optimize for the metrics if we give them time</span></li><li class="c0 li-bullet-0"><span class="c1">... Focusing on getting feedback from different sources</span></li><li class="c0 li-bullet-0"><span class="c1">... Not trying to stick to a schedule</span></li><li class="c0 li-bullet-0"><span class="c1">... Web Vitals metrics that may not be graduated to enforced in search</span></li></ul></div></div><script type="text/javascript" nonce="">(function(){/*

 Copyright The Closure Library Authors.
 SPDX-License-Identifier: Apache-2.0
*/
var aa="function"==typeof Object.create?Object.create:function(a){function b(){}b.prototype=a;return new b},ba="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(a==Array.prototype||a==Object.prototype)return a;a[b]=c.value;return a};
function ca(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");}var da=ca(this);function ea(a,b){if(b)a:{var c=da;a=a.split(".");for(var d=0;d<a.length-1;d++){var e=a[d];if(!(e in c))break a;c=c[e]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&ba(c,a,{configurable:!0,writable:!0,value:b})}}var h;
if("function"==typeof Object.setPrototypeOf)h=Object.setPrototypeOf;else{var l;a:{var fa={a:!0},ha={};try{ha.__proto__=fa;l=ha.a;break a}catch(a){}l=!1}h=l?function(a,b){a.__proto__=b;if(a.__proto__!==b)throw new TypeError(a+" is not extensible");return a}:null}var ia=h;
function m(a,b){a.prototype=aa(b.prototype);a.prototype.constructor=a;if(ia)ia(a,b);else for(var c in b)if("prototype"!=c)if(Object.defineProperties){var d=Object.getOwnPropertyDescriptor(b,c);d&&Object.defineProperty(a,c,d)}else a[c]=b[c];a.m=b.prototype}ea("Object.is",function(a){return a?a:function(b,c){return b===c?0!==b||1/b===1/c:b!==b&&c!==c}});var n=this||self;function p(){}function q(a){var b=typeof a;return"object"==b&&null!=a||"function"==b}
function ja(a,b){var c=Array.prototype.slice.call(arguments,1);return function(){var d=c.slice();d.push.apply(d,arguments);return a.apply(this,d)}}function ka(a,b){function c(){}c.prototype=b.prototype;a.m=b.prototype;a.prototype=new c;a.prototype.constructor=a;a.D=function(d,e,f){for(var g=Array(arguments.length-2),k=2;k<arguments.length;k++)g[k-2]=arguments[k];return b.prototype[e].apply(d,g)}}function r(a){return a};function t(a){t[" "](a);return a}t[" "]=p;function la(a,b,c){return Object.prototype.hasOwnProperty.call(a,b)?a[b]:a[b]=c(b)};function ma(a){return la(a.prototype,"$$generatedClassName",function(){return"Class$obf_"+{valueOf:function(){return++na}}})}var na=1E3;function v(){}v.prototype.s=function(){return this.j||(Object.defineProperties(this,{j:{value:oa=oa+1|0,enumerable:!1}}),this.j)};v.prototype.toString=function(){var a=w(x(pa(this.constructor)))+"@";var b=(this.s()>>>0).toString(16);return a+w(b)};function y(){}m(y,v);y.prototype.h=function(a){this.g=a;if(a instanceof Object)try{a.v=this}catch(b){}};function qa(a){a.g instanceof Error&&(Error.captureStackTrace?Error.captureStackTrace(a.g):a.g.stack=Error().stack)}y.prototype.toString=function(){var a=x(pa(this.constructor)),b=this.l;return null==b?a:w(a)+": "+w(b)};
function ra(a){if(null!=a){var b=a.v;if(null!=b)return b}a instanceof TypeError?(b=new sa,b.l=w(a),qa(b),b.i=a,b.h(new TypeError(b)),a=b):(b=new z,b.l=w(a),qa(b),b.i=a,b.h(Error(b)),a=b);return a};function A(){}m(A,y);function B(){}m(B,A);function z(){}m(z,B);z.prototype.h=function(a){B.prototype.h.call(this,"__noinit__"===this.i?a:this.i)};function sa(){}m(sa,z);var oa=0;function ta(a,b){return"string"==typeof a?a.charCodeAt(b):a.g(b)};function C(){}var ua,va;m(C,v);function wa(){wa=function(){};va=new D;ua=new E};function D(){}m(D,C);D.prototype.toString=function(){return""};function E(){}m(E,C);E.prototype.toString=function(){return"unknown"};function w(a){return null==a?"null":a.toString()}function xa(a){return 65536<=a?w(String.fromCharCode((55296+((a-65536|0)>>10&1023)|0)&65535))+w(String.fromCharCode((56320+((a-65536|0)&1023)|0)&65535)):String.fromCharCode(a&65535)}function ya(a,b){var c=b,d=a.length,e;b=ta(a,(e=c,c=c+1|0,e));var f;if(e=55296<=b&&56319>=b&&c<d)a=f=ta(a,c),e=56320<=a&&57343>=a;var g;e?g=65536+((b&1023)<<10)+(f&1023)|0:g=b;return g};function F(a,b){this.g=a;this.h=b}m(F,v);function x(a){if(0!=a.h){var b="L"+w(ma(a.g))+";";a=a.h;for(var c="",d=0;d<a;d=d+1|0)c=w(c)+"[";return w(c)+w(b)}return ma(a.g)}F.prototype.toString=function(){return"class "+w(x(this))};function pa(a){return la(a.prototype,"$$class/0",function(){return new F(a,0)})};function za(a){var b=a;try{var c;if(c="www.google.com"===Aa(a)){var d=Ba(a)[5];c="/url"===G(d,!0)}if(c){var e=Ca(a,"q");b=e?e:Ca(a,"url")}}catch(f){if(f=ra(f),!(f instanceof A))throw f.g;}return null!=b?b:""};function G(a,b){return null==a?a:b?decodeURI(a):decodeURIComponent(a)};var Da;function Ba(a){H();a=Da.exec(a);for(var b=[],c=0;7>=c;c=c+1|0)a.length<=c||null==a[c]?b.push(null):b.push(a[c]);return b}function Aa(a){a=Ba(a);return G(a[3],!0)}
function Ca(a,b){H();var c=a.indexOf(xa(35));c=0>c?a.length:c;a:{var d=0;for(var e=b.length;0<(d=a.indexOf(b,d))&&d<c;){var f=ya(a,d-1|0);if(38==f||63==f){if((d+e|0)>=a.length)break a;f=ya(a,d+e|0);if(61==f||38==f||35==f)break a}d=d+(e+1)|0}d=-1}if(0>d)return null;e=a.indexOf(xa(38),d);if(0>e||e>c)e=c;d=d+(b.length+1)|0;b=Math.min(a.length,d);a=a.substr(b,Math.min(a.length,Math.max(d,e))-b|0);c=" ";for(b=0;0<=(b=c.indexOf("\\",b));)36==c.charCodeAt(b+1|0)?(d=w(c.substr(0,b|0))+"$",e=b=b+1|0,c=d+w(c.substr(e))):
(d=w(c.substr(0,b|0)),e=b=b+1|0,c=d+w(c.substr(e)));a=a.replace(RegExp("\\+","g"),c);return G(a,!1)}function H(){H=function(){};Da=RegExp("^(?:([^:/?#.]+):)?(?://(?:([^/?#]*)@)?([^/#?]*?)(?::([0-9]+))?(?=[/#?]|$))?([^?#]+)?(?:\\?([^#]*))?(?:#([\\S\\s]*))?$")};var Ea=/&/g,Fa=/</g,Ga=/>/g,Ha=/"/g,Ia=/'/g,Ja=/\x00/g,Ka=/[\x00&<>"']/;var I;a:{var La=n.navigator;if(La){var Ma=La.userAgent;if(Ma){I=Ma;break a}}I=""}function J(a){return-1!=I.indexOf(a)};var Na=Array.prototype.indexOf?function(a,b){return Array.prototype.indexOf.call(a,b,void 0)}:function(a,b){if("string"===typeof a)return"string"!==typeof b||1!=b.length?-1:a.indexOf(b,0);for(var c=0;c<a.length;c++)if(c in a&&a[c]===b)return c;return-1};var Oa=J("Trident")||J("MSIE"),Pa=J("Edge")||Oa,Qa=J("Gecko")&&!(-1!=I.toLowerCase().indexOf("webkit")&&!J("Edge"))&&!(J("Trident")||J("MSIE"))&&!J("Edge"),Ra=J("Macintosh");function Sa(a){a&&"function"==typeof a.u&&a.u()};function K(){this.h=this.h;this.g=this.g}K.prototype.h=!1;K.prototype.u=function(){this.h||(this.h=!0,this.j())};K.prototype.j=function(){if(this.g)for(;this.g.length;)this.g.shift()()};function Ta(a,b,c){for(var d in a)b.call(c,a[d],d,a)};var L;function M(a,b){this.i=a===Ua&&b||"";this.j=Va}M.prototype.h=!0;M.prototype.g=function(){return this.i};var Va={},Ua={};function N(a,b){this.i=b===O?a:""}N.prototype.h=!0;N.prototype.g=function(){return this.i.toString()};N.prototype.toString=function(){return this.i.toString()};function P(a){return a instanceof N&&a.constructor===N?a.i:"type_error:SafeUrl"}
var Wa=RegExp('^(?:audio/(?:3gpp2|3gpp|aac|L16|midi|mp3|mp4|mpeg|oga|ogg|opus|x-m4a|x-matroska|x-wav|wav|webm)|font/\\w+|image/(?:bmp|gif|jpeg|jpg|png|tiff|webp|x-icon)|video/(?:mpeg|mp4|ogg|webm|quicktime|x-matroska))(?:;\\w+=(?:\\w+|"[\\w;,= ]+"))*$',"i"),Xa=/^data:(.*);base64,[a-z0-9+\/]+=*$/i,Ya=/^(?:(?:https?|mailto|ftp):|[^:/?#]*(?:[/?#]|$))/i;function Za(a){if(a instanceof N)return a;a="object"==typeof a&&a.h?a.g():String(a);Ya.test(a)||(a="about:invalid#zClosurez");return new N(a,O)}
var O={},$a=new N("about:invalid#zClosurez",O);var ab={};function Q(a,b,c){this.i=c===ab?a:"";this.h=!0}Q.prototype.g=function(){return this.i.toString()};Q.prototype.toString=function(){return this.i.toString()};function bb(a,b,c,d){a=a instanceof N?a:Za(a);b=b||n;c=c instanceof M?c instanceof M&&c.constructor===M&&c.j===Va?c.i:"type_error:Const":c||"";return void 0!==d?b.open(P(a),c,d):b.open(P(a),c)};function R(a,b){this.type=a;this.target=b;this.i=!1}R.prototype.g=function(){this.i=!0};var cb=function(){if(!n.addEventListener||!Object.defineProperty)return!1;var a=!1,b=Object.defineProperty({},"passive",{get:function(){a=!0}});try{n.addEventListener("test",p,b),n.removeEventListener("test",p,b)}catch(c){}return a}();function S(a){R.call(this,a?a.type:"");this.relatedTarget=this.target=null;this.button=this.screenY=this.screenX=this.clientY=this.clientX=0;this.key="";this.metaKey=this.shiftKey=this.altKey=this.ctrlKey=!1;this.state=null;this.pointerId=0;this.pointerType="";this.h=null;if(a){var b=this.type=a.type,c=a.changedTouches&&a.changedTouches.length?a.changedTouches[0]:null;this.target=a.target||a.srcElement;var d=a.relatedTarget;if(d){if(Qa){a:{try{t(d.nodeName);var e=!0;break a}catch(f){}e=!1}e||(d=null)}}else"mouseover"==
b?d=a.fromElement:"mouseout"==b&&(d=a.toElement);this.relatedTarget=d;c?(this.clientX=void 0!==c.clientX?c.clientX:c.pageX,this.clientY=void 0!==c.clientY?c.clientY:c.pageY,this.screenX=c.screenX||0,this.screenY=c.screenY||0):(this.clientX=void 0!==a.clientX?a.clientX:a.pageX,this.clientY=void 0!==a.clientY?a.clientY:a.pageY,this.screenX=a.screenX||0,this.screenY=a.screenY||0);this.button=a.button;this.key=a.key||"";this.ctrlKey=a.ctrlKey;this.altKey=a.altKey;this.shiftKey=a.shiftKey;this.metaKey=
a.metaKey;this.pointerId=a.pointerId||0;this.pointerType="string"===typeof a.pointerType?a.pointerType:db[a.pointerType]||"";this.state=a.state;this.h=a;a.defaultPrevented&&S.m.g.call(this)}}ka(S,R);var db={2:"touch",3:"pen",4:"mouse"};S.prototype.g=function(){S.m.g.call(this);var a=this.h;a.preventDefault?a.preventDefault():a.returnValue=!1};var T="closure_listenable_"+(1E6*Math.random()|0);var eb=0;function fb(a,b,c,d,e){this.listener=a;this.proxy=null;this.src=b;this.type=c;this.capture=!!d;this.h=e;this.key=++eb;this.g=this.o=!1}function gb(a){a.g=!0;a.listener=null;a.proxy=null;a.src=null;a.h=null};function U(a){this.src=a;this.g={};this.h=0}U.prototype.add=function(a,b,c,d,e){var f=a.toString();a=this.g[f];a||(a=this.g[f]=[],this.h++);var g;a:{for(g=0;g<a.length;++g){var k=a[g];if(!k.g&&k.listener==b&&k.capture==!!d&&k.h==e)break a}g=-1}-1<g?(b=a[g],c||(b.o=!1)):(b=new fb(b,this.src,f,!!d,e),b.o=c,a.push(b));return b};var V="closure_lm_"+(1E6*Math.random()|0),hb={},ib=0;function jb(a,b,c,d,e){if(d&&d.once)return kb(a,b,c,d,e);if(Array.isArray(b)){for(var f=0;f<b.length;f++)jb(a,b[f],c,d,e);return null}c=lb(c);return a&&a[T]?a.g(b,c,q(d)?!!d.capture:!!d,e):mb(a,b,c,!1,d,e)}
function mb(a,b,c,d,e,f){if(!b)throw Error("Invalid event type");var g=q(e)?!!e.capture:!!e,k=nb(a);k||(a[V]=k=new U(a));c=k.add(b,c,d,g,f);if(c.proxy)return c;d=ob();c.proxy=d;d.src=a;d.listener=c;if(a.addEventListener)cb||(e=g),void 0===e&&(e=!1),a.addEventListener(b.toString(),d,e);else if(a.attachEvent)a.attachEvent(pb(b.toString()),d);else if(a.addListener&&a.removeListener)a.addListener(d);else throw Error("addEventListener and attachEvent are unavailable.");ib++;return c}
function ob(){function a(c){return b.call(a.src,a.listener,c)}var b=qb;return a}function kb(a,b,c,d,e){if(Array.isArray(b)){for(var f=0;f<b.length;f++)kb(a,b[f],c,d,e);return null}c=lb(c);return a&&a[T]?a.h(b,c,q(d)?!!d.capture:!!d,e):mb(a,b,c,!0,d,e)}
function rb(a){if("number"!==typeof a&&a&&!a.g){var b=a.src;if(b&&b[T])b.i(a);else{var c=a.type,d=a.proxy;b.removeEventListener?b.removeEventListener(c,d,a.capture):b.detachEvent?b.detachEvent(pb(c),d):b.addListener&&b.removeListener&&b.removeListener(d);ib--;if(c=nb(b)){d=a.type;if(d in c.g){var e=c.g[d],f=Na(e,a),g;(g=0<=f)&&Array.prototype.splice.call(e,f,1);g&&(gb(a),0==c.g[d].length&&(delete c.g[d],c.h--))}0==c.h&&(c.src=null,b[V]=null)}else gb(a)}}}
function pb(a){return a in hb?hb[a]:hb[a]="on"+a}function qb(a,b){if(a.g)a=!0;else{b=new S(b,this);var c=a.listener,d=a.h||a.src;a.o&&rb(a);a=c.call(d,b)}return a}function nb(a){a=a[V];return a instanceof U?a:null}var sb="__closure_events_fn_"+(1E9*Math.random()>>>0);function lb(a){if("function"===typeof a)return a;a[sb]||(a[sb]=function(b){return a.handleEvent(b)});return a[sb]};function W(a){K.call(this);this.l=a;this.i={}}ka(W,K);var tb=[];function ub(a){Ta(a.i,function(b,c){this.i.hasOwnProperty(c)&&rb(b)},a);a.i={}}W.prototype.j=function(){W.m.j.call(this);ub(this)};W.prototype.handleEvent=function(){throw Error("EventHandler.handleEvent not implemented");};function vb(a,b,c,d){b=void 0===b?!1:b;c=void 0===c?!1:c;d=void 0===d?"editors":d;K.call(this);this.i=a||document.body;this.s=!!b;this.A=!!c;this.B=d;this.l=new W(this);a=ja(Sa,this.l);this.h?a():(this.g||(this.g=[]),this.g.push(a));a=this.l;b=this.i;c=this.C;d="click";Array.isArray(d)||(d&&(tb[0]=d.toString()),d=tb);for(var e=0;e<d.length;e++){var f=jb(b,d[e],c||a.handleEvent,!1,a.l||a);if(!f)break;a.i[f.key]=f}}m(vb,K);
vb.prototype.C=function(a){if(!(0!=a.h.button||Ra&&a.ctrlKey||a.i))for(var b=a.target;b&&b!=this.i;){if(b.tagName&&"a"==b.tagName.toLowerCase()){var c=b.getAttribute("href")||b.getAttributeNS("http://www.w3.org/1999/xlink","href"),d=za(c);if(c!=d){a:{b=void 0;try{b=Aa(d)}catch(u){u=ra(u);if(u instanceof A){b=!1;break a}throw u.g;}var e;if(e=null!=b){e=(wa(),va);var f=ua;b=Object.is(e,f)||null==e&&null==f?b.toLocaleLowerCase():b.toLowerCase();e=".google.com"===b.substr(b.length-11|0,11)}b=e}if(!b)if(this.A){c=
za(d);if(Object.is(c,d)||null==c&&null==d)d="//www.google.com/url?q="+w(encodeURIComponent(d)),d=w(d)+"&sa=D";d+="&source="+this.B}else d=this.s?c:d;f=d;b=void 0;d={target:"_blank",noreferrer:!0};c=window;if(f instanceof N)e=f;else{e="undefined"!=typeof f.href?f.href:String(f);if(!(e instanceof N))if(e="object"==typeof e&&e.h?e.g():String(e),Ya.test(e))e=new N(e,O);else{e=String(e);e=e.replace(/(%0A|%0D)/g,"");var g=e.match(Xa);e=g&&Wa.test(g[1])?new N(e,O):null}e=e||$a}g=void 0!==self.i;var k="strict-origin-when-cross-origin";
window.Request&&(k=(new Request("/")).referrerPolicy);k="unsafe-url"===k;if(g&&d.noreferrer){if(k)throw Error("Cannot use the noreferrer option on a page that sets a referrer-policy of `unsafe-url` in modern browsers!");d.noreferrer=!1}f=d.target||f.target;g=[];for(b in d)switch(b){case "width":case "height":case "top":case "left":g.push(b+"="+d[b]);break;case "target":case "noopener":case "noreferrer":break;default:g.push(b+"="+(d[b]?1:0))}b=g.join(",");if((J("iPhone")&&!J("iPod")&&!J("iPad")||J("iPad")||
J("iPod"))&&c.navigator&&c.navigator.standalone&&f&&"_self"!=f)b="A",g=document,b=String(b),"application/xhtml+xml"===g.contentType&&(b=b.toLowerCase()),g=b=g.createElement(b),e=e instanceof N?e:Za(e),g.href=P(e),b.setAttribute("target",f),d.noreferrer&&b.setAttribute("rel","noreferrer"),d=document.createEvent("MouseEvent"),d.initMouseEvent("click",!0,!0,c,1),b.dispatchEvent(d);else if(d.noreferrer){if(c=bb("",c,f,b),d=P(e),c){Pa&&-1!=d.indexOf(";")&&(d="'"+d.replace(/'/g,"%27")+"'");c.opener=null;
Ka.test(d)&&(-1!=d.indexOf("&")&&(d=d.replace(Ea,"&amp;")),-1!=d.indexOf("<")&&(d=d.replace(Fa,"&lt;")),-1!=d.indexOf(">")&&(d=d.replace(Ga,"&gt;")),-1!=d.indexOf('"')&&(d=d.replace(Ha,"&quot;")),-1!=d.indexOf("'")&&(d=d.replace(Ia,"&#39;")),-1!=d.indexOf("\x00")&&(d=d.replace(Ja,"&#0;")));d='<meta name="referrer" content="no-referrer"><meta http-equiv="refresh" content="0; url='+d+'">';if(void 0===L)if(b=null,(e=n.trustedTypes)&&e.createPolicy){try{b=e.createPolicy("goog#html",{createHTML:r,createScript:r,
createScriptURL:r})}catch(u){n.console&&n.console.error(u.message)}L=b}else L=b;d=(b=L)?b.createHTML(d):d;d=new Q(d,null,ab);(c=c.document)&&c.write&&(c.write(d instanceof Q&&d.constructor===Q?d.i:"type_error:SafeHtml"),c.close())}}else(c=bb(e,c,f,b))&&d.noopener&&(c.opener=null);a.g();break}}b=b.parentNode}};function wb(a,b,c,d){new vb(a,void 0===b?!1:b,void 0===c?!1:c,d)}var X=["DOCS_installLinkReferrerSanitizer"],Y=n;X[0]in Y||"undefined"==typeof Y.execScript||Y.execScript("var "+X[0]);
for(var Z;X.length&&(Z=X.shift());)X.length||void 0===wb?Y[Z]&&Y[Z]!==Object.prototype[Z]?Y=Y[Z]:Y=Y[Z]={}:Y[Z]=wb;}).call(this);
</script><script type="text/javascript" nonce="">DOCS_installLinkReferrerSanitizer( undefined,  true,  true, 'docs');</script></body></html>